Vuex 源码学习系列 - 七、Vuex 模块安装的实现

2024-01-15 06:34:01

在前面的文章中，我们已经学习了 Vuex 的基本概念、Vuex 的实现原理，以及 Vuex 的基本使用。在本章中，我们将重点学习 Vuex 模块安装的实现。

Vuex 模块安装的实现

action、mutation、getter 的收集

Vuex 模块安装时，需要收集模块中的 action、mutation、getter。具体实现如下：

function installModule (store, module, path = []) {
  // 获取模块的 namespace
  const namespace = module.namespace || path.join('/');
  // 获取模块的 action
  const actions = module.actions;
  if (actions) {
    for (const key in actions) {
      const action = actions[key];
      const type = namespace + '/' + key;
      store._actions[type] = { fn: action, namespace };
    }
  }
  // 获取模块的 mutation
  const mutations = module.mutations;
  if (mutations) {
    for (const key in mutations) {
      const mutation = mutations[key];
      const type = namespace + '/' + key;
      store._mutations[type] = { fn: mutation, namespace };
    }
  }
  // 获取模块的 getter
  const getters = module.getters;
  if (getters) {
    for (const key in getters) {
      const getter = getters[key];
      const type = namespace + '/' + key;
      store._getters[type] = getter;
    }
  }
  // 递归安装子模块
  const modules = module.modules;
  if (modules) {
    for (const key in modules) {
      installModule(store, modules[key], path.concat(key));
    }
  }
}

Vuex 模块安装的逻辑

Vuex 模块安装的逻辑如下：

收集模块中的 action、mutation、getter。
将收集到的 action、mutation、getter 添加到 store 中。
递归安装子模块。

Vuex 代码优化

Vuex 模块安装的代码可以进行一些优化，优化后的代码如下：

function installModule (store, module, path = []) {
  // 获取模块的 namespace
  const namespace = module.namespace || path.join('/');
  // 收集模块中的 action、mutation、getter
  const actions = module.actions;
  const mutations = module.mutations;
  const getters = module.getters;
  // 将收集到的 action、mutation、getter 添加到 store 中
  for (const key in actions) {
    const action = actions[key];
    const type = namespace + '/' + key;
    store._actions[type] = { fn: action, namespace };
  }
  for (const key in mutations) {
    const mutation = mutations[key];
    const type = namespace + '/' + key;
    store._mutations[type] = { fn: mutation, namespace };
  }
  for (const key in getters) {
    const getter = getters[key];
    const type = namespace + '/' + key;
    store._getters[type] = getter;
  }
  // 递归安装子模块
  const modules = module.modules;
  if (modules) {
    for (const key in modules) {
      installModule(store, modules[key], path.concat(key));
    }
  }
}