简版vuex

138 阅读1分钟
let Vue;
class Store {
  constructor(options) {
    this._mutations = options.mutations;
    this._actions = options.actions;
    this._getters = options.getters;
    this.getters = {};
    this.setGetters.bind(this)();
    this._vm = new Vue({
      data() {
        return {
          $$state: options.state
        };
      }
    });
    this.dispatch = this.dispatch.bind(this);
    this.commit = this.commit.bind(this);
  }
  get state() {
    window.Vm = this._vm;
    return this._vm.$data.$$state;
  }
  setGetters() {
    let that = this;
    for (let key in this._getters) {
      Object.defineProperty(that.getters, key, {
        get() {
          return that._getters[key](that.state);
        }
      });
    }
  }
  commit(type, ...args) {
    const entry = this._mutations[type];
    entry(this.state, ...args);
  }
  dispatch(type, ...args) {
    const entry = this._actions[type];
    entry(this, ...args);
  }
}
function install(_vue) {
  Vue = _vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store;
      }
    }
  });
}
export default {
  Store,
  install
};

import Vue from "vue";
import Vuex from "./sstore";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 1
  },
  mutations: {
    // state从何而来
    add(state) {
      console.log(state.counter);
      state.counter++;
    }
  },
  actions: {
    add(ctx) {
      setTimeout(() => {
        ctx.commit("add");
      }, 1000);
    }
  },
  getters: {
    double: state => {
      return state.counter * 2;
    }
  },
  modules: {}
});