VUEX 3.x源码分析——5. 理解Module

这是对vuex3版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章只讲解vuex中的Module，这也是vuex官网中“核心概念”的最后一个。
想了解vuex中的其他源码分析，欢迎参考我发布的下列文章：
VUEX 3 源码分析——1. 理解State
VUEX 3 源码分析——2. 理解Getter
VUEX 3 源码分析——3. 理解Mutations
VUEX3 源码分析——4. 理解Action
VUEX 3 源码分析——5. 理解Module
VUEX 3 源码分析——6. 理解命名空间namespace
VUEX 3 源码分析——7. 模块的动态注册和卸载

官方示例

• 对于下面的代码示例，可以发现模块内部的state、getter、mutation、action的调用方式和之前未使用module分块时有所不同。
• state的访问变成了store.state.moduleName
• mutation 和 getter，接收的第一个参数是模块的局部状态对象。
• action局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

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 的状态

const moduleA = {
   
  state: () => ({
   
    count: 0
  }),
  mutations: {
   
    increment (state) {
   
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },
  getters: {
   
    doubleCount (state) {
   
      return state.count * 2
    }
  },
  actions: {
   
    incrementIfOddOnRootSum ({
     state, commit, rootState }) {
   
      if (