当应用非常复杂，状态非常多的时候，需要将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

<template>
    <div id="app">
        <!-- module1 -->
        <h2>{{ module1.name }}</h2>
        <button @click="change1({'name': 'change1'})">module1改变</button>

        <!-- module2 -->
        <h2>{{ module2.name }}</h2>
        <button @click="change2({'name': 'change2'})">module2改变</button>
    </div></template><script>// 引入快捷方法import {mapState, mapGetters, mapActions} from 'vuex'export default {
    name: 'app',
    data () {
        return {
        }
    },
    computed:{
        // mapState取值
        // ...mapState({
        //     module1: state => state.a.module1.name,
        //     module2: state => state.b.module2.name
        // })

        // mapGetter取值
        ...mapGetters(['module1', 'module2'])
    },
    methods: {
        // mapAction取方法
        ...mapActions([
            'change1',
            'change2'
        ])
    }}</script><style></style>

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