浅读vuex源码,了解vuex基本原理
极简版vuex代码
class KVuex { constructor (options) { this.state = options.state this.mutations = options.mutations this.actions = options.actions // 借用vue本身的响应式的通知机制 // state 会将需要的依赖收集在 Dep 中 this._vm = new KVue({ data: { $state: this.state } }) } commit (type, payload, _options) { const entry = this.mutations[type] entry.forEach(handler=>handler(payload)) } dispatch (type, payload) { const entry = this.actions[type] return entry(payload) } }
构造函数constructor接受options参数,options参数传进来之后,作为成员属性保存下来。vuex是依赖vue的, 借用vue本身的响应式的通知机制,constructor里声明一个vue实例,把vuex里的state赋值给实例中的data, 从而实现响应式动态变化。
我们做提交改数据又是什么行为呢?commit有3个参数type payload _options,我们从mutations里取出type对应的函数,对它进行具体的操作(传入参数执行函数)
Dispatch与commit类似,接受2个参数type payload ,从actions里取出type对应的函数,对它进行具体的操作(传入参数执行函数)