剖析 Vuex 源码中 `Module` (模块) 的递归注册和命名空间 (namespaced) 解析机制。

各位观众老爷，大家好！今天咱们来聊聊 Vuex 源码里一个非常核心、但也容易让人绕晕的概念：Module，也就是模块的递归注册和命名空间。

这玩意儿听起来高大上，但其实就是 Vuex 为了应对大型应用，允许我们把 Store 分成一个个小模块，然后像搭积木一样拼起来。其中，递归注册保证了模块可以无限嵌套，而命名空间则避免了不同模块之间的变量冲突。

准备好了吗？咱们开始拆解 Vuex 源码，看看这俩机制到底是怎么运作的。

一、Module 的本质：一个“容器”

首先，咱们得明确 Module 是个啥玩意儿。在 Vuex 源码里，Module 其实就是一个类，它的作用简单来说就是“容器”。这个容器里可以放：

• state: 状态
• mutations: 修改状态的方法
• actions: 异步操作
• getters: 计算属性
• modules: 子模块（递归的关键！）

你可以把它想象成一个文件夹，里面可以放文件（state、mutations 等），也可以放子文件夹（modules）。

咱们先看看 Module 类的简化版代码：

class Module {
  constructor(rawModule, runtime) {
    this.runtime = runtime; // 是否是运行时注册的模块
    this.state = rawModule.state || {}; // 模块的状态
    this.mutations = rawModule.mutations || {}; // 模块的 mutations
    this.actions = rawModule.actions || {}; // 模块的 actions
    this.getters = rawModule.getters || {}; // 模块的 getters
    this.modules = rawModule.modules || {}; // 子模块
    this.namespaced = rawModule.namespaced || false; // 是否启用命名空间
    this._rawModule = rawModule; // 原始模块定义
  }

  forEachMutation(fn) {
    forEachValue(this.mutations, fn);
  }

  forEachAction(fn) {
    forEachValue(this.actions, fn);
  }

  forEachGetter(fn) {
    forEachValue(this.getters, fn);
  }

  forEachChild(fn) {
    forEachValue(this.modules, fn);
  }

  enableNamespacing() {
    this.namespaced = true;
  }
}

代码很直白，就是把我们定义的 state、mutations、actions 等等都存到 Module 实例的对应属性上。注意 modules 属性，它用来存放子模块，为递归注册打下了基础。

二、递归注册：像搭积木一样构建 Store

递归注册是 Vuex 构建模块化 Store 的核心机制。 简单来说，就是从根模块开始，依次遍历每个模块的 modules 属性，如果发现有子模块，就递归地创建 Module 实例，并添加到父模块的 _children 属性中。

这个过程就像搭积木一样，一层一层地构建起整个 Store 的结构。

咱们来看一段简化版的注册模块的代码(摘自Vuex源码)：

function installModule(store, rootState, path, module, hot) {
  const isRoot = !path.length; // 是否是根模块
  const namespace = store._modules.getNamespace(path); // 获取命名空间

  // 注册 mutations
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key;
    registerMutation(store, namespacedType, mutation, module);
  });

  // 注册 actions
  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key;
    const handler = action.handler || action;
    registerAction(store, type, handler, module);
  });

  // 注册 getters
  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key;
    registerGetter(store, namespacedType, getter, module);
  });

  // 递归注册子模块
  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot);
  });

  // 安装完子模块，注册 state（只在非热更新情况下注册）
  if (!isRoot && !hot) {
    const parentState = getNestedState(rootState, path.slice(0, -1));
    Vue.set(parentState, path[path.length - 1], module.state);
  }
}

这段代码做了几件事：

1. 计算命名空间： 根据当前模块的路径 (path) 和父模块的命名空间，计算出当前模块的命名空间。
2. 注册 mutations、actions、getters： 遍历当前模块的 mutations、actions、getters，加上命名空间前缀后，注册到 Store 的相应属性上。
3. 递归注册子模块： 遍历当前模块的 modules 属性，如果发现有子模块，就递归调用 installModule 函数，将子模块注册到 Store 中。注意 path.concat(key)，这会不断地更新模块的路径，确保每个模块都有唯一的路径。
4. 注册 state： 将模块的 state 注册到 Store 的 rootState 中。

可以看到，installModule 函数是一个递归函数，它不断地调用自身，直到所有的模块都被注册到 Store 中。

举个例子：

假设我们有如下的模块定义：

const moduleA = {
  namespaced: true,
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  modules: {
    moduleB: {
      namespaced: true,
      state: { message: 'hello' },
      mutations: {
        setMessage(state, payload) {
          state.message = payload;
        }
      }
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA: moduleA
  }
});

那么，installModule 函数的调用过程大概是这样的：

1. installModule(store, rootState, [], moduleA)
2. 计算 moduleA 的命名空间：moduleA/
3. 注册 moduleA 的 mutations：moduleA/increment
4. 递归调用 installModule(store, rootState, ['moduleA'], moduleB)
5. 计算 moduleB 的命名空间：moduleA/moduleB/
6. 注册 moduleB 的 mutations：moduleA/moduleB/setMessage
7. 注册 moduleA 的 state 到 rootState.moduleA
8. 注册 moduleB 的 state 到 rootState.moduleA.moduleB

最终，我们的 Store 的结构会是这样的：

{
  "state": {
    "moduleA": {
      "count": 0,
      "moduleB": {
        "message": "hello"
      }
    }
  },
  "mutations": {
    "moduleA/increment": function,
    "moduleA/moduleB/setMessage": function
  },
  "actions": {},
  "getters": {}
}

三、命名空间：避免变量冲突的利器

命名空间是 Vuex 为了解决不同模块之间变量冲突而引入的机制。 想象一下，如果没有命名空间，所有的 mutations、actions、getters 都暴露在全局作用域下，很容易出现重名的情况，导致程序出错。

通过启用命名空间，我们可以给每个模块加上一个前缀，将它们隔离起来，避免冲突。

如何启用命名空间？

很简单，在模块定义中，设置 namespaced: true 即可。

const moduleA = {
  namespaced: true, // 启用命名空间
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
};

命名空间的影响

启用命名空间后，会对 mutations、actions、getters 产生影响：

• mutations 和 getters： 它们的类型（type）会自动加上模块的命名空间前缀。例如，上面的 increment mutation 的类型会变成 moduleA/increment。
• actions： 默认情况下，actions 的类型也会加上命名空间前缀。但是，如果 action 定义了 root: true，则表示该 action 属于根级别的 action，它的类型不会加上命名空间前缀。

如何在组件中使用命名空间？

在组件中，我们可以使用 mapState、mapMutations、mapActions、mapGetters 等辅助函数来访问带命名空间的 state、mutations、actions、getters。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('moduleA', ['count']) // 指定模块的命名空间
  },
  methods: {
    ...mapMutations('moduleA', ['increment']) // 指定模块的命名空间
  }
};
</script>

如果没有指定命名空间，Vuex 会尝试在全局作用域下查找对应的 state、mutations、actions、getters，这可能会导致错误。

表格总结：命名空间的影响

特性	是否启用命名空间	类型（type）
mutations	否	全局类型
mutations	是	模块命名空间/全局类型
getters	否	全局类型
getters	是	模块命名空间/全局类型
actions	否	全局类型
actions	是	模块命名空间/全局类型
actions	是，且 root: true	全局类型

四、源码细节补充

咱们再来抠一些源码细节，让大家对 Module 和命名空间有更深入的了解。

• _children 属性： 在 installModule 函数中，子模块会被添加到父模块的 _children 属性中。这个属性是一个对象，key 是子模块的名称，value 是子模块的 Module 实例。
• _rawModule 属性： 每个 Module 实例都会保存原始的模块定义（rawModule）到 _rawModule 属性中。这在热更新的时候非常有用，可以方便地更新模块的定义。
• getNamespace 方法： store._modules.getNamespace(path) 方法用于根据模块的路径 (path) 计算出模块的命名空间。它的实现很简单，就是将路径中的所有模块名用 / 连接起来。
• registerMutation、registerAction、registerGetter 方法： 这些方法用于将 mutations、actions、getters 注册到 Store 的相应属性上。它们会判断是否启用了命名空间，并根据情况加上命名空间前缀。

五、总结

今天咱们一起剖析了 Vuex 源码中 Module 的递归注册和命名空间机制。 简单总结一下：

1. Module 是一个“容器”，用于存放 state、mutations、actions、getters 和子模块。
2. 递归注册是 Vuex 构建模块化 Store 的核心机制，它通过递归调用 installModule 函数，将所有的模块注册到 Store 中。
3. 命名空间用于避免不同模块之间的变量冲突，通过启用命名空间，我们可以给每个模块加上一个前缀，将它们隔离起来。

希望通过今天的讲解，大家对 Vuex 的模块化机制有了更深入的了解。 掌握了这些知识，在开发大型 Vue 应用时，就能更加灵活地使用 Vuex，提高代码的可维护性和可扩展性。

好了，今天的分享就到这里，感谢大家的收看！ 我们下次再见！