当应用非常复杂，状态非常多的时候，需要将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分开编写。
（1）src/vuex/module1.js

// 模块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只能获取对象。