Module

当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

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

  1. import {createStore} from '@mpxjs/core'
  2. const moduleA = {
  3.   state: { ... },
  4.   mutations: { ... },
  5.   actions: { ... },
  6.   getters: { ... }
  7. }
  9. const moduleB = {
  10.   state: { ... },
  11.   mutations: { ... },
  12.   actions: { ... }
  13. }
  15. const store = createStore({
  16.   modules: {
  17.     a: moduleA,
  18.     b: moduleB
  19.   }
  20. })
  22. store.state.a // -> moduleA 的状态
  23. store.state.b // -> moduleB 的状态

模块的局部状态

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

  1. const moduleA = {
  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. }