Vuex简单实现
Vuex简单实现
1. 实现this.$store全局访问
const install = (vue) => {
Vue = vue;
Vue.mixin({
beforeCreate() {
/* 获取根组件传递$store */
if (this.$options && this.$options.store) {
this.$store = this.$options.store;
} else {/* 从父组件传递 */
this.$store = this.$parent && this.$parent.$store;
}
}
})
}
export default { install, Store }//导出
在Vue.use(vuex)的过程中会调用vuex的install方法，同时把Vue作为形参传入，通过Vue.mixin给所有的组件添加生命周期事件，先给根组件设置this.$store = this.$options.store,然后让所有子组件继承
2.Store类的实现
class Store {
constructor(options) {
/* 初始化 */
this.vm = new Vue({
data: { state: options.state }
})/* 使state里的数据响应式化 */
this.getters = {};
this.mutations = {};
this.actions = {};
/* 将modules转换格式 _raw _children state */
this.modules = new ModuleCollection(options);
console.log(this.modules);
/* 安装模块 */
installModules(this, this.state, [], this.modules.root);
}
get state() {/* 代理获取state */
return this.vm.state;
}
commit = (key, ...payload) => {
this.mutations[key].forEach(fn => fn(...payload));
}
dispatch = (key, ...payload) => {
this.actions[key].forEach(fn => fn(...payload));
}
registerModule(moduleName, module) {
/* 注册模块 */
this.modules.register([moduleName], module);/* (path,rootModule) */
/* 格式化后的模块 */
let rawModule = this.modules.root._children[moduleName];
installModules(this, this.state, [moduleName], rawModule);
}
}
1.将state放到一个vue实例中，实现响应式，同时通过get state()实现代理
2.初始化getters,mutations,actions
3.创建一个ModuleColeection对象，将modules转化为标准格式
class ModuleCollection {
constructor(options) {
this.register([], options)
}
/* path记录根到当前模块路径[b,c] */
register(path, rootModule) {
/* 创建当前模块的格式化对象 */
let rawModule = {
_raw: rootModule,
_children: {},
state: rootModule.state
}
/* 若还没有根，第一次进入，则给根模块赋值 */
if (!this.root) {
this.root = rawModule;
} else {
/* 找到当前模块父模块 [b,c] => this.root._children['b'] */
let parent = path.slice(0, -1).reduce((data, item) => {
return data._children[item];
}, this.root);
/* 示例：this.root._children['b']._children['c']=rawModule */
parent._children[path[path.length - 1]] = rawModule;
}
/* 遍历注册子模块 */
if (rootModule.modules) {
forEachValue(rootModule.modules, (moduleName, module) => {
this.register(path.concat(moduleName), module);
})
}
}
}
ModuleColeection每次调用register方法都会创建一个对象rawModule,将每个模块的所有内容放到_raw中，将state数据放到state中，用_children来模块的直接子模块，第一次调用register时将options转化成的rawModule赋给this.root
/* 创建当前模块的格式化对象 */
let rawModule = {
_raw: rootModule,
_children: {},
state: rootModule.state
}
利用封装的全局方法forEachValue取得子模块的名字和内容，递归调用子模块进行注册
let forEachValue = (obj, callback) => {
Object.keys(obj).forEach(key => {
callback(key, obj[key]);
})
}
/* 遍历注册子模块 */
if (rootModule.modules) {
forEachValue(rootModule.modules, (moduleName, module) => {
this.register(path.concat(moduleName), module);
})
}
path.concat的作用是记录路径，用于找到父模块，将自身放到父模块的_children对象中，形成图中格式,例如下面代码：在不是根模块的情况下，register传入的path=['b','c']时，就可以推断c模块属于第三层，通过前面的b找到父模块，再将自己放到父模块的_children对象。
/* 找到当前模块父模块 [b,c] => this.root._children['b'] */
let parent = path.slice(0, -1).reduce((data, item) => {
return data._children[item];
}, this.root);
/* 示例：this.root._children['b']._children['c']=rawModule */
parent._children[path[path.length - 1]] = rawModule;
4. installModules安装模块
function installModules(store, rootState, path, rawModule) {
/* 把所有数据放到state上 */
if (path.length) {
/* 获取父模块 示例：['b','c'] => rootState['b'] */
let parent = path.slice(0, -1).reduce((data, item) => {
return data[item];
}, rootState);
/* rootState['b']['c'] = rawModule.state */
Vue.set(parent, path[path.length - 1], rawModule.state);
}
/* getters */
let getters = rawModule._raw.getters;
if (getters) {
forEachValue(getters, (key, value) => {
Object.defineProperty(store.getters, key, {
get: () => value(rawModule.state)
})
})
}
/* mutations */
let mutations = rawModule._raw.mutations;
if (mutations) {
forEachValue(mutations, (mutationName, value) => {
/* 收集所有模块的同名mutation */
let arr = store.mutations[mutationName] || (store.mutations[mutationName] = []);
arr.push((...payload) => { value(rawModule.state, ...payload) });
})
}
/* actions */
let actions = rawModule._raw.actions;
if (actions) {
forEachValue(actions, (actionName, value) => {
let arr = store.actions[actionName] || (store.actions[actionName] = []);
arr.push((...payload) => { value(store, ...payload) });
})
}
/* 遍历子模块 */
forEachValue(rawModule._children, (name, value) => {
installModules(store, rootState, path.concat(name), value);
})
}
实现在组件中类似{{$store.state.b.c.num}}的调用方式，原理就是将所有的数据根据嵌套关系放到state中，利用reduce寻找父模块，调用Vue.set添加响应式数据
/* 把所有数据放到state上 */
if (path.length) {
/* 获取父模块 示例：['b','c'] => rootState['b'] */
let parent = path.slice(0, -1).reduce((data, item) => {
return data[item];
}, rootState);
/* rootState['b']['c'] = rawModule.state */
Vue.set(parent, path[path.length - 1], rawModule.state);
}
对所有模块的getters进行劫持，直接使用$store.getters访问，限制就是模块之间命名不能重复
/* getters */
let getters = rawModule._raw.getters;
if (getters) {
forEachValue(getters, (key, value) => {
Object.defineProperty(store.getters, key, {
get: () => value(rawModule.state)//执行函数返回结果
})
})
}
将所有模块的mutations成员放到store.mutations对象上去，然后根据名称划分为多个订阅数组，commit调用时就可以直接触发所有模块执行同名的函数，actions区别在于传回的第一个参数时store,这样做的原因是实现actions到达事件后可以调用mutations成员执行操作
/* ------------installMutations------------ */
/* mutations */
let mutations = rawModule._raw.mutations;
if (mutations) {
forEachValue(mutations, (mutationName, value) => {
/* 收集所有模块的同名mutation */
let arr = store.mutations[mutationName] || (store.mutations[mutationName] = []);
arr.push((...payload) => { value(rawModule.state, ...payload) });
})
}
/* actions */
let actions = rawModule._raw.actions;
if (actions) {
forEachValue(actions, (actionName, value) => {
let arr = store.actions[actionName] || (store.actions[actionName] = []);
arr.push((...payload) => { value(store, ...payload) });
})
}
/* -------------------Store------------------- */
commit = (key, ...payload) => {
this.mutations[key].forEach(fn => fn(...payload));
}
dispatch = (key, ...payload) => {
this.actions[key].forEach(fn => fn(...payload));
}
递归安装子模块
/* 遍历子模块 */
forEachValue(rawModule._children, (name, value) => {
installModules(store, rootState, path.concat(name), value);
})
5.registerModule方法拓展模块
/* ------------Store方法------------ */
registerModule(moduleName, module) {
/* 注册模块 */
this.modules.register([moduleName], module);/* (path,rootModule) */
/* 格式化后的模块 */
let rawModule = this.modules.root._children[moduleName];
installModules(this, this.state, [moduleName], rawModule);
}
/* -----------外部调用方式----------- */
/* 增加组件 */
store.registerModule('d', {
state: { num: 'd1' },
modules: {
e: { state: { num: 'e1' } }
}
})
