Module

在 Scrimba 上尝试这节课

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

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

  1. const moduleA = {
  2. state: { ... },
  3. mutations: { ... },
  4. actions: { ... },
  5. getters: { ... }
  6. }
  7. const moduleB = {
  8. state: { ... },
  9. mutations: { ... },
  10. actions: { ... }
  11. }
  12. const store = new Vuex.Store({
  13. modules: {
  14. a: moduleA,
  15. b: moduleB
  16. }
  17. })
  18. store.state.a // -> moduleA 的状态
  19. 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. },
  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. }

命名空间

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

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

  1. const store = new Vuex.Store({
  2. modules: {
  3. account: {
  4. namespaced: true,
  5. // 模块内容(module assets)
  6. state: { ... }, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
  7. getters: {
  8. isAdmin () { ... } // -> getters['account/isAdmin']
  9. },
  10. actions: {
  11. login () { ... } // -> dispatch('account/login')
  12. },
  13. mutations: {
  14. login () { ... } // -> commit('account/login')
  15. },
  16. // 嵌套模块
  17. modules: {
  18. // 继承父模块的命名空间
  19. myPage: {
  20. state: { ... },
  21. getters: {
  22. profile () { ... } // -> getters['account/profile']
  23. }
  24. },
  25. // 进一步嵌套命名空间
  26. posts: {
  27. namespaced: true,
  28. state: { ... },
  29. getters: {
  30. popular () { ... } // -> getters['account/posts/popular']
  31. }
  32. }
  33. }
  34. }
  35. }
  36. })

启用了命名空间的 getter 和 action 会收到局部化的 getterdispatchcommit。换言之,你在使用模块内容(module assets)时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

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

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

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

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

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

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

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

带命名空间的绑定函数

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

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

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

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

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

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

给插件开发者的注意事项

如果你开发的插件(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. }

模块动态注册

在 store 创建之后,你可以使用 store.registerModule 方法注册模块:

  1. // 注册模块 `myModule`
  2. store.registerModule('myModule', {
  3. // ...
  4. })
  5. // 注册嵌套模块 `nested/myModule`
  6. store.registerModule(['nested', 'myModule'], {
  7. // ...
  8. })

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

模块动态注册功能使得其他 Vue 插件可以通过在 store 中附加新模块的方式来使用 Vuex 管理状态。例如,vuex-router-sync 插件就是通过动态注册模块将 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'once' 时,为了在服务端渲染中避免有状态的单例)
  • 在一个 store 中多次注册同一个模块
    如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染的问题。

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

  1. const MyReusableModule = {
  2. state () {
  3. return {
  4. foo: 'bar'
  5. }
  6. },
  7. // mutation, action 和 getter 等等...
  8. }

原文: https://vuex.vuejs.org/zh/guide/modules.html