Module

    由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

    为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

    对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

    2.   state: { count: 0 },
    3.   mutations: {
    4.     increment (state) {
    5.       // 这里的 `state` 对象是模块的局部状态
    6.       state.count++
    7.     }
    8.   },
    10.   getters: {
    11.     doubleCount (state) {
    12.       return state.count * 2
    13.     }
    14.   }
    15. }

    同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

    1. const moduleA = {
    2.   // ...
    3.   actions: {
    4.     incrementIfOddOnRootSum ({ state, commit, rootState }) {
    5.       if ((state.count + rootState.count) % 2 === 1) {
    6.         commit('increment')
    7.       }
    8.     }
    9.   }
    10. }

    对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

    1. const moduleA = {
    2.   // ...
    3.   getters: {
    4.     sumWithRootCount (state, getters, rootState) {
    5.       return state.count + rootState.count
    6.     }
    7.   }
    8. }

    默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

    如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

    在带命名空间的模块内访问全局内容（Global Assets）

    如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

    若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

    1. modules: {
    2.   foo: {
    3.     namespaced: true,
    5.     getters: {
    6.       // 你可以使用 getter 的第四个参数来调用 `rootGetters`
    7.       someGetter (state, getters, rootState, rootGetters) {
    9.         rootGetters.someOtherGetter // -> 'someOtherGetter'
    10.       },
    11.       someOtherGetter: state => { ... }
    12.     },
    14.     actions: {
    15.       // 在这个模块中， dispatch 和 commit 也被局部化了
    16.       // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
    17.       someAction ({ dispatch, commit, getters, rootGetters }) {
    18.         getters.someGetter // -> 'foo/someGetter'
    19.         rootGetters.someGetter // -> 'someGetter'
    21.         dispatch('someOtherAction') // -> 'foo/someOtherAction'
    22.         dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
    24.         commit('someMutation') // -> 'foo/someMutation'
    25.         commit('someMutation', null, { root: true }) // -> 'someMutation'
    26.       },
    27.       someOtherAction (ctx, payload) { ... }
    28.     }
    29.   }
    30. }

    在带命名空间的模块注册全局 action

    若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。例如：

    1. {
    2.   actions: {
    3.     someOtherAction ({dispatch}) {
    4.       dispatch('someAction')
    5.     }
    6.   },
    7.   modules: {
    8.     foo: {
    9.       namespaced: true,
    11.       actions: {
    12.         someAction: {
    13.           root: true,
    14.           handler (namespacedContext, payload) { ... } // -> 'someAction'
    15.         }
    16.       }
    17.     }
    18.   }
    19. }

    带命名空间的绑定函数

    当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：

    1. computed: {
    2.   ...mapState({
    3.     a: state => state.some.nested.module.a,
    4.   })
    5. },
    7.   ...mapActions([
    8.     'some/nested/module/foo', // -> this['some/nested/module/foo']()
    9.     'some/nested/module/bar' // -> this['some/nested/module/bar']()
    10.   ])
    11. }

    对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：

    而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

    1. import { createNamespacedHelpers } from 'vuex'
    3. const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
    5. export default {
    6.   computed: {
    7.     // 在 `some/nested/module` 中查找
    8.     ...mapState({
    9.       a: state => state.a,
    10.       b: state => state.b
    11.     })
    12.   },
    13.   methods: {
    14.     // 在 `some/nested/module` 中查找
    15.     ...mapActions([
    16.       'foo',
    17.       'bar'
    18.     ])
    19.   }
    20. }

    给插件开发者的注意事项

    如果你开发的插件（Plugin）提供了模块并允许用户将其添加到 Vuex store，可能需要考虑模块的空间名称问题。对于这种情况，你可以通过插件的参数对象来允许用户指定空间名称：

    1. // 通过插件的参数对象得到空间名称
    2. // 然后返回 Vuex 插件函数
    3. export function createPlugin (options = {}) {
    4.   return function (store) {
    5.     // 把空间名字添加到插件模块的类型（type）中去
    6.     const namespace = options.namespace || ''
    7.     store.dispatch(namespace + 'pluginAction')
    8.   }
    9. }
    1. // 注册模块 `myModule`
    2. store.registerModule('myModule', {
    3.   // ...
    4. })
    5. // 注册嵌套模块 `nested/myModule`
    6. store.registerModule(['nested', 'myModule'], {
    7.   // ...
    8. })

    之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

    模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如， 插件就是通过动态注册模块将 vue-router 和 vuex 结合在一起，实现应用的路由状态管理。

    你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

    保留 state

    在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。你可以通过 preserveState 选项将其归档：store.registerModule('a', module, { preserveState: true })。

    当你设置 preserveState: true 时，该模块会被注册，action、mutation 和 getter 会被添加到 store 中，但是 state 不会。这里假设 store 的 state 已经包含了这个 module 的 state 并且你不希望将其覆写。

    有时我们可能需要创建一个模块的多个实例，例如：

    • 创建多个 store，他们公用同一个模块 (例如当 runInNewContext 选项是 false 或 时，为了)
    • 在一个 store 中多次注册同一个模块
      如果我们使用一个纯对象来声明模块的状态，那么这个状态对象会通过引用被共享，导致状态对象被修改时 store 或模块间数据互相污染的问题。

    实际上这和 Vue 组件内的 data 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态（仅 2.3.0+ 支持）：