Vue全家桶学习—Vuex核心的五个概念之Module

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/122028480

一、Module

Vuex集中式存储管理应用的所有组件的状态，放在store中，当项目达到一定的规模，那么这个store就会变得十分的复杂。这时候就需要将这样一个庞大的store进行分类处理，也就是将将store分割成一个个module（模块），便于日后的修改和管理。这与我们生活中对仓库中的物品进行分类是一样的，例如将电子类产品放在a货架上，将日常生活产品放在b货架上，这样的货架就对应了一个个module。每个module拥有自己的state、mutations、actions以及getters。

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是一个函数。

二、模块的局部状态

1、对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象，也就是本模块自己的state。以下代码中的mutation和getter中的参数state都是muduleA自己的state（局部状态），所以可以直接通过state.count访问到count的状态。

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

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

2、同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态（也就是整个store最外层的状态）为context.rootState。以下代码中的state.count和rootState.count分别就是moduleA自己的状态中的count和外部store中的状态的count。

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

3、对于模块内部的 getter，根节点状态会作为第三个参数暴露出来，也就是在getter中引入根节点的状态，是通过getter的第三个参数来获取。

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

三、命名空间namespaced

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

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
也就是说，在声明命名空间后，调用module中的属性，就必须带mudole的名称，这样可以防止不同module之间的同名属性互相混淆。