Vue + Node + Element UI 项目(九)_VueX管理应用状态

组件模块封装后，发现侧边栏收缩和展开的功能不起作用了，这是因为，按钮在头部组件，侧边栏在侧边栏组件，组件之间默认不共享信息。为了解决该问题，我们引入了vuex专门管理应用状态，解决组件状态共享。

安装

npm install vuex --save（回车）

测试

参考文献：
Vue + Element UI 实现权限管理系统 前端篇（八）：管理应用状态
https://www.cnblogs.com/xifengxiaoma/p/9558290.html

【注】可将中data下的isCollapse注释

按照上文的方法，点击菜单切换按钮时出现问题

只能一步一步排查

• 检查是否引入vuex成功
  

将其修改为：

 isCollapse:true  // 导航栏收缩状态

测试，发现侧边栏收缩了，但切换按钮还是不能点，报一样的问题

• 网上查阅资料，发现在函数中引用store需要加上this（版本问题），还需要this.$store.commit('')传入的参数必须和store中的方法名相同，但也可与当前页面中的方法名不同。

最终效果

Store 模块化

文件结构：

1. 修改appInfo.js

export default {
  state: {
    sysName: "设计之家",  // 系统名称
    isCollapse:true  // 导航栏收缩状态
  },
  getters: {
    collapseChage(state){// 对应着上面state
      return isCollapse;
    }
  },
  mutations: {
    collapseChage(state){  // 改变收缩状态
      state.isCollapse = !state.isCollapse;
    }
  },
  actions: {

  }
}

2. 修改index.js

import Vue from 'vue' //后面的vue要小写
import vuex from 'vuex'

Vue.use(vuex);

//引入模块
import app from './modules/appInfo.js'; //侧边栏收缩

const store = new vuex.Store({
  modules: {
      app: app   
      // 其他
  }
})

export default store

3. 修改Header.vue 和 SideBar.vue

在引用 store 状态的地方加上模块名称

$store.state.app.sysName 实在太长了，所以我们采用mapState简化，直接使用原来简短的名字。

  computed: {
    ...mapState({
      sysName: state=>state.app.sysName,
      isCollapse: state=>state.app.isCollapse
    })
  },

将所有页面中的$store.state.isCollapse 改回成 isCollapse 。

若此时测试，会发现页面加载出错，“mapState”未定义，是因为用这个需要在当前页面引入“mapState”：

import { mapState } from 'vuex'

刷新页面，成功！