vuex中有关modules的基本使用

当一个项目比较大的时候，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。这样可以对多种的全局状态进行分类管理。

1.在store中的index.js中手动引入modules 

import Vue from "vue";
import Vuex from "vuex";
import permissionModules from "./modules/permission.js";

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
   
  },

  mutations: {
  
    
  },

  actions: {},

  modules: {
    permission: {//引用模块的方式
      namespaced: true,
      ...permissionModules,
    },
  },
});

 2.permission.js 文件中代码

var permission = {
    // 项目仓库分支模块
    state: {
       
        name: ''
       
    },
    mutations: {
     setname(state, val) {
      state.name= val;
    }

    },
    actions: {
     setname({state}, val) {
      return new Promise(resolve => {
        setTimeout(function () {
          state.name= val;
          resolve(state.name);
        }, 2000)
      })

      }
    
}
export default permission;

 3.permission.js中的方法在vue中的使用

    // commit 执行mutations里的方法，同步操作
    this.$store.commit('permission/setname', {name: '小红'});
    console.log(this.user.name);
    // dispatch 执行actions里的方法，异步操作
    this.$store.dispatch('permission/setName', {name: '李强'}).then(res => {
      console.log(res.name);
    })