手写vuex4源码（六）命名空间实现

一、命名空间使用

在子模块对象中添加 namespaced：true，为模块开启命名空间功能；

开启命名空间功能，相当于为每个模块添加独立的作用域，实现模块间状态和事件的隔离；

二、命名空间实现逻辑

在模块注册阶段，会通过类似发布订阅的方式将各模块中的 action、mutation 进行收集并注册，需要根据模块是否开启命名空间状态，为模块拼接命名空间前缀；

所以，可以统一理解为，在事件订阅时，为事件添加对应命名空间标识即可；

三、命名空间实现

1、命名空间标识

在模块收集注册时，添加是否开启命名空间标识

export default class Module {
    constructor(rawModule) {
    	...
        this.namespaced = rawModule.namespaced; // 自己是否有命名空间
    }
}

2、拿到namespace

installModule安装时需要用到namespace，在installModule中调用方法获取命名空间

function installModule(store, rootState, path, module) {
  // 递归安装
  let isRoot = !path.length; // 如果数组是空数组 说明是根，否则不是

  // 下面需要使用namespace，在这里把命名空间进行处理
  const namespaced = store._modules.getNamespaced(path); // [a,c]
  console.log('--',path);
  console.log(namespaced);
  }

_module是ModuleCollection生成的，在ModuleCollection定义getNamespaced方法

getNamespaced(path) {
        let module = this.root // [a,c] a/c
        return path.reduce((namespaceStr, key) => {
            module = module.getChild(key); // 子模块
            return namespaceStr + (module.namespaced ? key + '/' : '')
        }, '')
    }

3、实现getter、mutation、action的命名空间

以getter为例，拼接时属性名前面加上namespaced

 store._wrappedGetters[namespaced + key] = () => {
      // 通过这个方法去获取最新的state
      return getter(getNestedState(store.state, path));
    };

四、测试

 a模块-------------------
  {{ aCount }}
  <br>
  b模块-------------------
  {{ bCount }}
  <br>
  c模块-------------------
  {{ cCount }}
  <br>
  <button @click="$store.commit('aCount/add',1)">change a</button>
  <button @click="$store.commit('bCount/add',1)">change b</button>
  <button @click="$store.commit('aCount/cCount/add',1)">change c</button>

五、核心逻辑梳理

• 在 ModuleCollection 模块收集类中，提供根据 path 获取命名空间标识的能力：getNamespaced(path)；
• 在 installModule 模块安装时，通过调用getNamespaced(path) 获取当前模块的命名空间标识；
• 在安装/注册mutation、action、getter 时，为对应的事件添加（拼接）上命名空间标识；
  这样，就实现了 Vuex 命名空间 namespaced 功能，即：根模块与各子模块中定义的事件完全独立互不影响；