关于vuex:简单的vuex实现

实现一个vuex插件
pvuex 初始化: Store申明、install实现，vuex.js:

let Vue;// 定义install办法 实现赋值与注册function install(_Vue) {  Vue = _Vue;  Vue.mixin({    beforeCreate() {      if (this.$options.store) {        Vue.prototype.$store = this.$options.store;      }    }  });}// 定义sotre类,治理响应式状态 stateclass Store {  constructor(options = {}) {    this._vm = new Vue({      data: {        $$state:options.state      }    });   }  get state() {    return this._vm._data.$$state  }  set state(v) {    return v  } }function install(_Vue) {  Vue = _Vue;  Vue.mixin({    beforeCreate() {      if (this.$options.store) {        Vue.prototype.$store = this.$options.store;      }        }  }); } export default { Store, install };

实现 commit :依据用户传入type获取并执行对应 mutation

 // class Store...  constructor(options = {}) {    // 保留用户配置的mutations选项    this._mutations = options.mutations || {}  }  commit(type, payload) {    // 获取对应的mutation    const entry = this._mutations[type]    // 传递state给mutation     entry && entry(this.state, payload);  } 

实现 actions :依据用户传入type获取并执行对应 action

constructor(options = {}) {    this._actions = options.actions || {}    const store = this    const {commit, action} = store    // 将上下文指定为sotre实例    this.commit = this.commit.bind(this)    this.dispatch = this.dispatch.bind(this)}dispatch(type, payload) {    // 获取对应的action    const entry = this._actions[type]     return entry && entry(this, payload);}

实现 getters , 并利用computed属性缓存.

// class Store const store = this const computed = {} Object.keys(this._getters).forEach(key => {     computed[key] = function(){        store._getters[key](store.state)    }        Object.defineProperty(this.getters, key, {        get(){            return store._vm[key]        },        set(v){            console.log(v)        }    }) }); this._vm = new Vue({     data: {         $$state:options.state     },     computed });