Vue核心技术-57,Vuex-核心概念-Module

一,前言

上一篇介绍了Action,了解了vuex如何进行异步操作处理
这一篇介绍Vuex最后一个核心概念:Module

---

二,Vuex-Module

问题:

应用中所有状态都集中在单一状态树中,当应用变得复杂时,store对象可能会变得臃肿

解决:

Vuex允许将store分割成模块
每个模块都拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

// moduleA
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

// moduleB
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

// modules包含moduleA和moduleB
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

---

三,模块的局部状态

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

// moduleA
const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

2,模块内部的action，局部状态通过context.state暴露出来，根节点状态为context.rootState：

// moduleA
const moduleA = {
  actions: {
    // state为局部状态,rootState为根节点状态
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

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

// moduleA
const moduleA = {
  getters: {
    // rootState为根节点状态
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

---

四,命名空间

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

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

例如：

onst store = new Vuex.Store({
  modules: {
    account: {

      // 启用命名空间
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

启用了命名空间的getter和action会收到局部化的getter，dispatch和commit
使用模块内容（module assets）时,不需要在同一模块内额外添加空间名前缀
更改namespaced属性后,不需要修改模块内的代码

在带命名空间的模块内访问全局内容

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

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

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

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

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

例如：

{
  actions: {
    someOtherAction ({dispatch}) {
      dispatch('someAction')
    }
  },
  modules: {
    foo: {
      namespaced: true,

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }
    }
  }
}

带命名空间的绑定函数

问题:

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

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

解决:

可以将模块的空间名称字符串作为第一个参数传递给上述函数，
这样所有绑定都会自动将该模块作为上下文。

上面的例子可以简化为：

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

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

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

---

五,插件开发者的注意事项

如果你的插件提供了模块并允许用户将其添加到Vuex store，可能需要考虑模块的空间名称问题

对于这种情况，可以通过插件的参数对象来允许用户指定空间名称

// 通过插件的参数对象得到空间名称
// 然后返回 Vuex 插件函数
export function createPlugin (options = {}) {
  return function (store) {
    // 把空间名字添加到插件模块的类型（type）中去
    const namespace = options.namespace || ''
    store.dispatch(namespace + 'pluginAction')
  }
}

---

六,模块动态注册

在store创建后，可使用store.registerModule方法注册模块：

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})


// 之后就可以通过store.state.myModule和store.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 })

---

七,模块重用

问题:

在一个 store 中多次注册同一个模块
如果使用纯对象声明模块状态，这个状态对象会通过引用被共享，
导致状态对象被修改时 store 或模块间数据互相污染的问题。

解决:

使用一个函数来声明模块状态（仅 2.3.0+ 支持）:

const MyReusableModule = {
  state () {
    // 解决引用共享问题
    return {
      foo: 'bar'
    }
  },
  // mutation, action 和 getter 等等...
}