怎么实现vuex源码的核心类ModuleCollection
本文想写 vuex 源码中核心的一个类，ModuleCollection，这个类是将参数格式化成一定的结构。
感觉这种模式，在别的源码里也常用，希望自己能真正理解并运用，所以特地有此篇。
vuex 使用的时候，传入类似这种参数
export default new Vuex.Store({ modules: { aModule: { state: { msg: "a模块的颜酱" }, }, bModule: { state: { msg: "b模块的颜酱" }, modules: { cModule: { state: { msg: "c模块的颜酱" }, } } } }, state: { msg: "hi, i am 颜酱" } });
使用 c 模块的state的时候，是this.$store.state.b.c.msg。
vuex为了方便使用参数，对参数，处理成如下格式，其实就是将父子关系更加明显化。
{ "_raw": 根模块数据, "state": { "msg": "hi, i am 颜酱", }, "_children": { "aModule": { "_raw":a模块的原来数据, "state": { "msg": "a模块的颜酱" }, "_children": {}, }, "bModule": { "_raw": b模块的原来数据, "state": { "msg": "b模块的颜酱" }, "_children": { "cModule": { "_raw": c模块的原来数据, "state": { "msg": "c模块的颜酱" }, "_children": {}, } } } } }
每个模块都有的字段：_raw、state、children
我的思路：简单封装函数，返回正确的格式
开始，我写了个formatData方法，但不够优雅哇。
其实这个先试着自己写，处理完第一层逻辑，基本就ok，核心就是递归，只是递归的时候，注意children这个对象，这也算是这里的难点。
const options = { modules: { aModule: { state: { msg: "a模块的颜酱" } }, bModule: { state: { msg: "b模块的颜酱" }, modules: { cModule: { state: { msg: "c模块的颜酱" } } } } }, state: { msg: "hi, i am 颜酱" } }; const formatData = (options, res) => { res._raw = options; res.state = options.state; const childModules = options.modules; // 如果有模块的话 if (childModules) { // 遍历模块 Object.keys(childModules).forEach(childModuleName => { const curChildModule = childModules[childModuleName]; // 这边没有的必须先设置{}，这样才能赋值属性 res.children = res.children ? res.children : {}; res.children[childModuleName] = res.children[childModuleName] ? res.children[childModuleName] : {}; // 以上两行代码都是为第二个参数准备的，防止undefined报错 formatData(curChildModule, res.children[childModuleName]); }); } }; // 因为res是另外的，所以封装个高阶函数，这也使用起来很方便 const format = options => { let res = {}; formatData(options, res); return res; }; console.log(format(options));
vuex源码的思路：封装类，以路径的方式注册每个模块
源码很赞的是，以类的形式出现，核心逻辑是传入模块的路径和模块，来注册在相应的位置。
比如：根模块有b模块，b模块里有c模块，c模块里有d模块，那么d模块的路径就是[b,c,d]
注册d模块时候，其实这样就可以：
root.children.b.children.c.children.d = dModule
当然实际情况是，路径是动态的，需要我们写个函数去实现这样的功能：
为方便实现，将上面代码拆分下
// d的父模块 const parentModule = root.children.b.children.c // 父模块里注册当前模块 parentModule.children.d = dModule
这样拆分的好处是，parentModule可以通过函数很方便的拿到
function register(path,module){ const init = root const fn = (acc,cur) => acc[children][cur] // 父模块，这里想象成上面实际的例子 const parentModule = path.slice(0,-1).reduce(fn,init) // 父模块里注册当前模块 const curModuleName = path[path.length-1] parentModule.children[curModuleName] = module }
以上就是最核心的逻辑了，当然这里的root还需要赋值的，其他的两个属性也需要加上，但这都不是事，不另做解释
const options = { modules: { aModule: { state: { msg: "a模块的颜酱" } }, bModule: { state: { msg: "b模块的颜酱" }, modules: { cModule: { state: { msg: "c模块的颜酱" } } } } }, state: { msg: "hi, i am 颜酱" } }; class ModuleCollection { constructor(options) { // 这里的root存放格式化之后的数据 this.root = null; // 首次注册的是根模块，根模块的路径是空的 this.register([], options); } register(path, module) { let moduleItem = { _raw: module, // 注意这里的children是对象 children: {}, state: module.state }; // 第一次肯定是根模块，根模块必须赋值 if (!this.root) { this.root = moduleItem; } else { // 核心代码：根据路径注册模块 const curModuleName = path[path.length - 1]; const fn = (acc, cur) => acc.children[cur]; const parent = path.slice(0, -1).reduce(fn, this.root); parent.children[curModuleName] = moduleItem; } // 当前模块有子模块的话，继续挨个注册 const childModules = module.modules; childModules && Object.keys(childModules).forEach(childModuleName => { const curChildModule = childModules[childModuleName]; // concat用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 this.register(path.concat(childModuleName), curChildModule); }); } } const modules = new ModuleCollection(options); // 这就是格式化之后的数据了 console.log(modules.root); console.log(modules.root.children.bModule.children);
