Vuex详解（二） 进阶——Vuex的模块化使用

随着项目越来越复杂，我们可能向store中添加的状态越来越多，这不便于我们对数据的管理，同时，既然vue是模块化开发，那么我们能否将Vuex中的状态也进行模块化管理呢？

Vuex——Module

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

const moduleA = {
   
  state: () => ({
    ... }),
  mutations: {
    ... },
  actions: {
    ... },
  getters: {
    ... }
}

const moduleB = {
   
  state: () => ({
    ... }),
  mutations: {
    ... },
  actions: {
    ... }
}

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

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

值得注意的是，这里两份模块的state写法state: () => ({ ... })，这里通过函数来返回了一个state对象。如果我们不这样写，而是使用一个纯对象来声明模块的状态，那么这个状态对象就会通过引用被共享，导致状态动向被修改时store或模块间数据互相污染的问题。实际上，这和Vue组件内的date类似，它也是使用了一个函数。

但是，模块化store对象之后，如果将所有的内容都写在一个store.js中，就显得过于臃肿，我们难以