手写极简版vuex

let Vue = '' // 保存Vue实例
class Store {
  constructor (options) {
    this.$options = options // 保存选项
    // Vue实例配合getter、setter保证state的只读性质
    this._vm = new Vue({
      data () {
        return {
          $state: options.state // 以$开头取消数据代理
        }
      }
    })
    // 将commit、dispatch中的this绑定为store实例，以防执行解构store获取到的commit/dispatch时函数内的this为undefined
    this.commit = this.commit.bind(this)
    this.dispatch = this.dispatch.bind(this)
  }

  get state () {
    return this._vm.$data.$state // 取消代理的数据可以用$data访问到
  }

  set state (value) {
    console.error('please use replaceState to reset state')
  }

  // 声明commit方法
  commit (methodName, data) {
    const entry = this.$options.mutations[methodName]
    if (entry) {
      entry(this._vm.$data.$state, data)
    } else {
      console.error(`unknown mutation: ${methodName}!`)
    }
  }

  // 声明dispatch方法
  dispatch (methodName, data) {
    const entry = this.$options.actions[methodName]
    if (entry) {
      entry(this, data)
    } else {
      console.error(`unknown action: ${methodName}!`)
    }
  }
}
const install = function (_Vue) {
  Vue = _Vue
  // 注册实例的$store
  Vue.mixin({
    beforeCreate () {
      // 判断是不是main.js中的根实例
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}

export default { Store, install }