Vue + Element UI 实现权限管理系统 前端篇（八）：管理应用状态

使用Vuex管理应用状态

1.引入背景

如之前 导航菜单收缩和展开功能，组件封装后，状态分开了。

现在需要一个共享组件来做数据同步状态，

Vuex 很好的解决了这个需求（ps：有句话叫不要专门为了 Vuex 而用 Vuex - - 慢慢品了只能0 0）

 

 

 2.安装

https://vuex.vuejs.org/zh/installation.html

官网最简洁了

我是 cli 装的时候自带了帮我装好了- -

3.添加配置

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
      collapse: false   // 导航栏收缩状态
  },
  mutations: {
      collapse(state) { // 改变收缩状态
          state.collapse = !state.collapse;
      }
  },
  actions: {},
  modules: {}
});

 

 

4.使用 Store