vuex实现原理

思路及流程

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]();

项目案例