手写Vuex

1. 添加全局的$store,实现共享数据

index.js

import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from './Vuex'
/*
1.Vuex特点1
  使用Vuex的时候需要用到Vue的use方法
  我们都知道use方法是用于注册插件的
  所以VueX的本质就是一个插件
  所以实现VueX就是在实现一个全局共享数据的插件
 */
Vue.use(Vuex)
/*
2.Vuex特点2
  在使用Vuex的时候我们会通过Vuex.Store创建一个仓库
  所以还需要在Vuex中新增Store属性, 这个属性的取值是一个类
 */
export default new Vuex.Store({
  // 用于保存全局共享数据
  state: {
    name: 'xxx'
  },
  // 用于同步修改共享数据
  mutations: {
  },
  // 用于异步修改共享数据
  actions: {
  },
  // 用户模块化共享数据
  modules: {
  }
})
/*
3.Vuex特点3
  为了保证每个Vue实例中都能通过this.$store拿到仓库,
  我们还需要给每个Vue实例都动态添加一个$store属性
 */

vuex.js:

/*
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;
        // 将创建Store时需要共享的数据添加到Store上面
        // 这样将来我们就能通过this.$store拿到这个Store
        // 既然能拿到这个Store,我们就可以通过.state拿到需要共享的属性
        this.state = options.state;
    }
}
export default {
    install,
    Store
}

2. 实现getters方法

const install = (Vue, options)=>{
    // 给每一个Vue实例都添加一个$store属性
    Vue.mixin({
        beforeCreate(){
            if(this.$options && this.$options.store){
                this.$store = this.$options.store;
            }
            else{
                this.$store = this.$parent.$store;
            }
        }
    });
}
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);
                }
            })
        }
    }
}
export default {
    install,
    Store
}

3. 实现mutations方法

import Vue from 'vue'
const install = (Vue, options)=>{
    // 给每一个Vue实例都添加一个$store属性
    Vue.mixin({
        beforeCreate(){
            if(this.$options && this.$options.store){
                this.$store = this.$options.store;
            }
            else{
                this.$store = this.$parent.$store;
            }
        }
    });
}
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);
                }
            })
        }
    }
}
export default {
    install,
    Store
}

4. 实现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);
                }
            })
        }
    }
}