vuex实现原理

以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

实现vuex.Store，接受一个对象参数，主要包含state,actions,mutations,getters等

• 核心，用new Vue创建一个数据双向的state

function Store(options) {
    this.mutations = options.mutations;
    this.actions = options.actions;
    this.state = options.state;

    //双向绑定
    var state = options.state;
    var store = this;
    function resetStoreVM(store, state) {
        store._vm = new Vue({
            data: {
                $$state: state
            }
        });
    }
    resetStoreVM(store, state);

    //获取值getters
    let getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(getterName=>{
        Object.defineProperty(this.getters,getterName,{
            get:()=>{
                return getters[getterName](this.state)
            }
        })
    })

    // 触发更新dispatch
    this.dispatch = function (type, payload) {
        store.actions[type]({ commit: store.commit, state: store.state }, payload);
    };

    // 触发更新commit
    this.commit = function (type, payload) {
        store.mutations[type](store.state, payload)
        // store.state.userInfo = payload
    };
    
    // 实现获取state的值
    // get state(){
    //     return this._vm.data.$$state
    // }
}

// 实现获取state的值
var prototypeAccessors$1 = { state: { configurable: true } };
prototypeAccessors$1.state.get = function () {
  return this._vm._data.$$state
};
prototypeAccessors$1.state.set = function (v) {};
Object.defineProperties( Store.prototype, prototypeAccessors$1 );

• 创建实例

new Vuex.Store({
    state: {
        // 登录账户信息
        userInfo: sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : '1',
        // 选择的学校信息
        schoolInfo: sessionStorage.getItem('schoolInfo') ? JSON.parse(sessionStorage.getItem('schoolInfo')) : '2'
    },
    actions: {
        setUserInfoActions({
            commit
        }, data) {
            commit('setUserInfoMutations', data)
        },
        setSchoolInfoActions({
            commit
        }, data) {
            commit('setSchoolInfoMutations', data)
        },
    },
    mutations: {
        setUserInfoMutations(state, data) {
            state.userInfo = data
            sessionStorage.setItem('userInfo', JSON.stringify(data))
        },
        setSchoolInfoMutations(state, data) {
            // data.schoolId = 4403050134;
            state.schoolInfo = Object.assign({}, data)
            sessionStorage.setItem('schoolInfo', JSON.stringify(data))
        },
        loginOutMutations(state) {
            state.userInfo = ''
            state.schoolInfo = ''
            sessionStorage.removeItem('userInfo')
            sessionStorage.removeItem('schoolInfo')
        }
    },
    getters: {
        userInfo: state => state.userInfo,
        schoolInfo: state => state.schoolInfo,
    }
})

实现将store对象绑定到每一个组件实例上面

• 核心，利用Vue.mixin()将它混入每一个组件

function install(Vue) {
    Vue.mixin({ beforeCreate: vuexInit });
    function vuexInit() {
        var options = this.$options;
        if (options.store) {
            this.$store = typeof options.store === 'function'
                ? options.store()
                : options.store;
        } else if (options.parent && options.parent.$store) {
            this.$store = options.parent.$store;
        }
    }
}

导出

var index = {
    Store: Store,
    install: install,
    version: '3.1.2',
}
export default index