Store选项

回首Vue3之状态管理篇（一）提到了Store在Vuex4.x中的获取方式，不了解的可以传送门看一下。

Module

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

在我们实际开发中，如果项目太大，模块太多，需要的全局状态比较多，这时我们就可以使用module来进行模块分离，以便于维护和阅读。

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

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

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

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

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，但是我们需要主要的是：每个模块的mutations和getters的state是局部状态，每个模块的actions的context也是局部状态，如下：

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

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

我们也需要注意的是：modules里面的getters和actions的context会多一个参数rootState，可以获取根状态。

总结

项目过大时，使用module可以让项目更容易维护和阅读，如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之状态管理篇（三）

Store选项

Module

总结