vuex中modules的使用

modules提出的目的：

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

（来自vuex文档）

模块化思想在做项目较大的时候十分有用，下面依据vuex文档简单记录一下modules的使用方式

如何使用modules

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

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

const store = new Vuex.Store({
state：{ ... }，//全局state
  modules: {
    a: moduleA,
    b: moduleB
  }
})

 1.其中moduleA和modulesB的state为局部state，而store对象建立时与modules同级的为全局state

　　访问moduleA中的state ：store.state.a,  全局state ：store.state

2.对于moduleA和moduleB的getters和mutations中，对于参数与全局的getters和mutations存在一定区别

　　getters和mutations中第一个参数的state为局部state，

　　getters的第二个参数为全局getters，第三个为根state（rootState）

3.对于moduleA和moduleB的和mutations中

局部state通过context.state，全局state通过content.rootState

actions: {
    test({ state, rootState }) {
      ....
    }

4.moduleA和moduleB除了state为局部，其他stategetters和mutations，actions可以全局直接使用，但参数的作用域全局的存在不同

module 的命名空间

这部分明天完成（需要整理一下）

vuex中modules的使用

原文：https://www.cnblogs.com/kongbaifeiye/p/12577941.html