开门见山
本篇文章主要简单实现vuex,希望可以帮助到大家
代码演示
//用于保存vue实例
let _Vue = null
class Store {
//options传入的选项
constructor(options) {
//对象的解构赋值如果没有值的话,就是用默认值
const { state = {}, getters = {}, actions = {}, mutations = {} } = options;
//state设置成响应式数据
this.state = _Vue.observable(state);
// 把this.getters初始化对象,对象具有一些方法,
//这些方法都需要接收state参数,并且最后都有返回值,一般情况都是对state
//进行处理,把处理的结果返回,这些方法都是用来获取值,当访问getter成员的时候
//才会获取值,所以这些方法可以通过 Object.defineProperty转换成getter对象
//中的get访问器,通过下面的这种方法对象更干净
this.getters = Object.create(null);
//对getters进行遍历
Object.key(getters).forEach(key => {
//对this.getters每一个属性进行遍历,把每一个key注册到this.getters中
Object.defineProperty(this.getters, key, {
//返回key在getter中获取到的方法
get: () => getters[key](state),
})
})
//存储私有属性 下划线表示私有
this._mutations = mutations;
this._actions = actions;
}
//commit 有两个参数 type是mutation的key,payload是传入的参数
commit(type, payload) {
//调用保存的_mutations其中的方法,state是要操作的数据
//payload是传入的参数
this._mutations[type](this.state, payload);
}
//dispatch 有两个参数 type是mutation的key,payload是传入的参数
dispatch(type, payload) {
//dispatch 有两个参数this是_actions的key,payload是传入的参数
this._actions[type](this, payload);
}
}
function install(Vue) {
//保存vue实例
_Vue = Vue;
//使用Vue混合机制
_Vue.mixin({
beforeCreate() {
//逻辑判断是否有this.$options.store这个方法
if (this.$options.store) {
//在vue原型上注册$store方法
_Vue.prototype.$store = this.$options.store
}
}
})
}
export default { Store, install }
谢谢观看,如有不足,敬请指教