05-vuex原理

一、基础实现

1、由于每次创建vuex会new一个对象，所以vuex是一个类
2、由于使用vuex需要进行use，所以vuex是一个vue插件，需要有install方法，在use的时候会自动执行install方法
3、创建好vuex之后，会给没有一个vue实例绑定$store对象。

/*
install方法会在外界调用Vue.use的时候执行
并且在执行的时候会把Vue实例和一些额外的参数传递给我们
* */
const install = (Vue, options)=>{
    // 给每一个Vue实例都添加一个$store属性
    /*
    在Vue中有一个名称叫做mixin方法, 这个方法会在创建每一个Vue实例的时候执行
    所以我们可以通过mixin方法给每一个Vue实例添加$store属性
    * */
    Vue.mixin({
        beforeCreate(){
            /*
            Vue在创建实例的时候会先创建父组件, 然后再创建子组件
            * */
            // console.log(this.$options.name);
            /*
            Root -> App -> HelloWorld
            如果是根组件, 那么默认就有store
            我们只需要将store变成$store即可
             */
            if(this.$options && this.$options.store){
                this.$store = this.$options.store;
            }
            // 如果不是根组件, 那么默认没有store
            // 我们只需要将它父组件的$store赋值给它即可
            else{
                this.$store = this.$parent.$store;
            }
        }
    });
}
class Store {
    constructor(options){
        this.options = options;
    }
}
export default {
    install,
    Store
}

二、实现共享数据
将选项中state属性保存到this.$store中。

class Store {
    constructor(options){
        // this.options = options;
        // 将创建Store时需要共享的数据添加到Store上面
        // 这样将来我们就能通过this.$store拿到这个Store
        // 既然能拿到这个Store,我们就可以通过.state拿到需要共享的属性
        this.state = options.state;
    }
}

三、实现getters方法

class Store {
    constructor(options){
        // 将传递进来的state放到Store上
        this.state = options.state;
        // 将传递进来的getters放到Store上
        // this.getters = options.getters;
        // 1.拿到传递进来的getters
        let getters = options.getters || {};
        // 2.在Store上新增一个getters的属性
        this.getters = {};
        // 3.将传递进来的getters中的方法添加到当前Store的getters上
        for(let key in getters){
            Object.defineProperty(this.getters, key, {
                get:()=>{
                    return getters[key](this.state);
                }
            })
        }
    }
}

四、实现mutations方法
这是一个同步的方法

class Store {
    constructor(options){
        // 将传递进来的state放到Store上
        // this.state = options.state;
        /*
        在Vue中有一个util的工具类, 这个工具类上有一个defineReactive方法
        通过这个方法就可以快速的将某个数据变成双向绑定的数据
        defineReactive这个方法接收三个参数
        第一个参数: 要给哪个对象添加属性
        第二个参数: 要给指定的对象添加什么属性
        第三个参数: 要给这个属性添加什么值
        * */
        Vue.util.defineReactive(this, 'state', options.state);
        // 将传递进来的getters放到Store上
        this.initGetters(options);
        // 将传递进来的mutations放到Store上
        this.initMutations(options);
    }
    commit(type, payload){ // 'addNum', 10
        this.mutations[type](payload); //  this.mutations[addNum](10);
    }
    initMutations(options){
        // 1.拿到传递进来的mutations
        let mutations = options.mutations || {};
        // 2.在Store上新增一个mutations的属性
        this.mutations = {};
        // 3.将传递进来的mutations中的方法添加到当前Store的mutations上
        for(let key in mutations){
            this.mutations[key] = (payload)=>{ // 10
                mutations[key](this.state, payload); // addNum(this.state, 10);
            }
        }
    }
    initGetters(options){
        // this.getters = options.getters;
        // 1.拿到传递进来的getters
        let getters = options.getters || {};
        // 2.在Store上新增一个getters的属性
        this.getters = {};
        // 3.将传递进来的getters中的方法添加到当前Store的getters上
        for(let key in getters){
            Object.defineProperty(this.getters, key, {
                get:()=>{
                    return getters[key](this.state);
                }
            })
        }
    }
}

五、实现actions方法

class Store {
    constructor(options){
        // 将传递进来的state放到Store上
        Vue.util.defineReactive(this, 'state', options.state);
        // 将传递进来的getters放到Store上
        this.initGetters(options);
        // 将传递进来的mutations放到Store上
        this.initMutations(options);
        // 将传递进来的actions放到Store上
        this.initActions(options);
    }
    dispatch = (type, payload)=>{ // 'asyncAddAge', 5
        this.actions[type](payload); // this.actions[asyncAddAge](5);
    }
    initActions(options){
        // 1.拿到传递进来的actions
        let actions = options.actions || {};
        // 2.在Store上新增一个actions的属性
        this.actions = {};
        // 3.将传递进来的actions中的方法添加到当前Store的actions上
        for(let key in actions){
            this.actions[key] = (payload)=>{ // 5
                actions[key](this, payload); // asyncAddAge(this, 5);
            }
        }
    }
    commit = (type, payload)=>{ // 'addAge', 5
        // console.log(this);
        this.mutations[type](payload); //  this.mutations[addAge](5);
    }
    initMutations(options){
        // 1.拿到传递进来的mutations
        let mutations = options.mutations || {};
        // 2.在Store上新增一个mutations的属性
        this.mutations = {};
        // 3.将传递进来的mutations中的方法添加到当前Store的mutations上
        for(let key in mutations){
            this.mutations[key] = (payload)=>{ // 10
                mutations[key](this.state, payload); // addNum(this.state, 10);
            }
        }
    }
    initGetters(options){
        // this.getters = options.getters;
        // 1.拿到传递进来的getters
        let getters = options.getters || {};
        // 2.在Store上新增一个getters的属性
        this.getters = {};
        // 3.将传递进来的getters中的方法添加到当前Store的getters上
        for(let key in getters){
            Object.defineProperty(this.getters, key, {
                get:()=>{
                    return getters[key](this.state);
                }
            })
        }
    }
}