vuex实现原理
2020-04-04 本文已影响0人
祝家庄打烊
思路及流程
vuex是在每个组件上注入this.store获取共享的状态,定义操作state的方法。
首先使用vue.use(vuex)表明vuex是vue的插件,只能被vue使用——实例化Store并传入参入——Store注入到根组件上。以上三个步骤便可以使用vuex实现数据在组件中的共享了。
定义vuex文件,编写install方法
当使用到vue.use的时候,会调用Store文件中的install方法,并可以获取到当前组件的执行期上下文。通过全局混合的方式,在每个组件上嵌入this.$store属性。
const install = (_vue) => {
if(vue!=_vue){
vue=_vue;
}
vue.mixin({
beforeCreate(){
if(this.$options && this.$options.Store){
this.$store = this.$options.Store;
}else{
this.$store = this.$parent && this.$parent.$store;
}
}
})
}
定义vuex文件,编写Store类
当Store类被实例化时,会执行constructor构造器并且传入option所需的参数,在对state、getters、mutations、actions编写。
1、实现state:理论上讲,直接把参数中的state赋值当前组件上即可,这样会引发一个问题,state的值无法动态改变。要使用state双向绑定可以直接使用vue实例中data方法,然后在通过get进行属性的截取。
this.getState = new vue({
data:function(){
return{
state:option.state
}
}
})
2、实现getters:通过Ojbect.defineProperty监听getters值里面的变化,当获取值的时候,会触发get方法,返回并执行参数getters里面的方法。
this.getters={};
for(let key in option.getters){
Object.defineProperty(this.getters,key,{
get(){
return option.getters[key](_that.state);
}
})
}
3、实现mutations:把参数mutations里面的方法重新用一个变量去接收,作用是防止变量的全局污染。定义commit函数,当被执行时,触发定义mutaion对象里面的方法。
let mutations = {};
for(let key in option.mutations){
mutations[key]=value=>{
option.mutations[key](this.state,value);
}
}
this.commit = (key,value=null) => mutations[key](value);
4、实现actions:方法同上,有个地方需要作出微调,传递的参数是当前的执行期上下文。
let actions = {};
for(let key in option.actions){
actions[key]=()=>{
option.actions[key](this);
}
}
this.dispatch = key => actions[key]();