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