当应用非常复杂，状态非常多的时候，需要将store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，从上至下进行同样方式的分割。

1、大致的结构

// 模块Aconst moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: { ... }}// 模块Bconst moduleB = {  state: { ... },  mutations: { ... },  actions: { ... }}// 组装const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB  }})// 取值store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态

2、详细示例

实际开发中建议把module分开编写。

// 模块1const module1 = {    // 初始化状态    state: {        module1: {            name: '模块1'        }    },    // 编写动作    mutations: {        CHANGE1 (state, data) {            state.module1 = data;        }    },    // 取值    getters: {        module1: function(state){            return state.module1;        }    },    // 创建驱动，可异步    actions: {        change1 ({commit}, data) {            commit('CHANGE1', data)        }    }}export default module1;

（2）src/vuex/module2.js

// 模块1const module2 = {    // 初始化状态    state: {        module2: {            name: '模块2'        }    },    // 编写动作    mutations: {        CHANGE2 (state, data) {            state.module2 = data;        }    },    // 取值    getters: {        module2: function(state){            return state.module2;        }    },    // 创建驱动，可异步    actions: {        change2 ({commit}, data) {            commit('CHANGE2', data)        }    }}export default module2;

（3）src/vuex/store.js

// 引入vueimport Vue from 'vue'// 引入vueximport Vuex from 'vuex'// 引入module1import module1 from '@/vuex/module1'// 引入module2import module2 from '@/vuex/module2'// 使用vuexVue.use(Vuex)// 模块注入const store = new Vuex.Store({    modules: {        a: module1,        b: module2    }})// 输出storeexport default store;

（4）组件中使用，src/compontent/one.vue

PS：module中命名要唯一，不然获取值和改变值的时候会冲突，目前亲测mapGetters只能获取对象。