简易 vuex - mini-vuex #

export let Vue;

class Store {
  constructor(options) {
    let state = options.state;
    let getters = options.getters;
    let mutations = options.mutations;
    let actions = options.actions;
    this.mutations = mutations;
    this.actions = actions;

    // 这里我们期望state 是响应视图
    // this.state = state;
    // 借用vue本身的响应式的通知机制
    // state 会将需要的依赖手机在 Dep 中
    this._vm = new Vue({
      data: {
        // 在定义数据vue对$或者_的退让，不进行代理
        $$state: state,
      },
    });

    this.getters = {};

    Object.keys(getters).forEach((gettersKey) => {
      Object.defineProperty(this.getters, gettersKey, {
        get() {
          return getters[gettersKey](state);
        },
      });
    });
  }
  get state() {
    return this._vm._data.$$state;
  }
  commit(type, payload) {
    this.mutations[type](this.state, payload);
  }
  dispatch(type, payload) {
    this.actions[type](this.state, payload);
  }
}

const install = (_Vue) => {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      // 所有组件都定义一个$store 属性可以用来获取 store实例
      if (this.$options.store) {
        // 根
        this.$store = this.$options.store;
      } else if (this.$parent && this.$parent.$store) {
        this.$store = this.$parent.$store;
      }
    },
  });
};

export default {
  Store,
  install,
};