美文网首页
vuex实现原理

vuex实现原理

作者: zhang463291046 | 来源:发表于2020-09-28 14:26 被阅读0次

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

实现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

相关文章

  • vuex实现原理

    vuex是vue的一个数据状态管理工具,简单的来说他就是一个vue的仓库用来存储vue的数据方便组件之间的调用。 ...

  • vuex实现原理

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

  • vuex实现原理

    思路及流程 vuex是在每个组件上注入this.store获取共享的状态,定义操作state的方法。首先使用vue...

  • vuex源码分析(三)——Module和ModuleCollec

    本文参考珠峰架构公开课之vuex实现原理 在使用vuex过程中,如果数据量很大可以用vuex的modules实现模...

  • vuex源码分析(一)——初始化vuex

    本文参考珠峰架构公开课之vuex实现原理 vuex是基于vue框架的状态管理。 如何在vue项目中初始化vuex?...

  • 2019-10-09 面试

    1,css3新特性2,vue路由和实现原理3,vuex的实现原理4,webpack打包的过程,loading和pl...

  • vue实现多个tab标签页的切换与关闭

    1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存...

  • Vuex核心实现原理

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,可以帮助我们管理共享状态。 如何在Vue中使用Vu...

  • vuex原理以及实现

    vuex官方文档 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存...

  • vuex源码分析(二)——双向数据绑定

    本文参考珠峰架构公开课之vuex实现原理 vuex中如果state发生改变的时候会自动更新视图,此功能是借助vue...

网友评论

      本文标题:vuex实现原理

      本文链接:https://www.haomeiwen.com/subject/wcyduktx.html