Module

PS:虽然支持module,但不支持namespace。在MPX里,我们更推荐使用多实例模式

当应用变得非常复杂时,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. }
  8. const moduleB = {
  9. state: { ... },
  10. mutations: { ... },
  11. actions: { ... }
  12. }
  13. const store = createStore({
  14. modules: {
  15. a: moduleA,
  16. b: moduleB
  17. }
  18. })
  19. store.state.a // -> moduleA 的状态
  20. store.state.b // -> moduleB 的状态
  21. export default store

模块的局部状态

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

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

同样,对于模块内部的 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. }

模块在组件中的引入方式

  1. const store = createStore({
  2. modules: {
  3. a: {
  4. state: {
  5. name: 1
  6. },
  7. getters: {
  8. getName: s => s.name
  9. }
  10. },
  11. b: moduleB
  12. }
  13. })
  14. createComponent({
  15. computed: {
  16. // mapState引入module方式有两种
  17. ...store.mapState({
  18. test: 'a.name'
  19. }),
  20. ...store.mapState('a', ['name']),
  21. ...store.mapGetters('getName') // 由于没有提供namespace概念,所以getters都是全局的,类似的还有mutations & actions
  22. }
  23. })