Vuex的module使用

// store.js

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

Vue.use(Vuex);

const moduleA = {
  namespaced: true,
  state: () => ({
    name: "moduleA",
  }),
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    commitSetName({state, commit}, name) {
      state.name = name //可以直接通过 state 进行修改（同步）
      commit('setName', name) // 也可以通过 commit 提交 mutations 来进行修改（一般用来异步操作）
    }
  }
};

const moduleB = {
  namespaced: true,
  state: () => ({
    name: "moduleB"
  }),
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
});

export default store;

 

 

 说明：vuex 的 module 的使用，和平常的直接使用区别不太大，只是需要用/来区分模块路径，用以指明具体的模块操作（需要为模块开启 namespaced:true）