vuex的实现的底层原理

1.vuex原理

        （1）实现一个受保护的state

                通过new去初始化一个vue实例，利用vue中的data是响应式的。在data中定义$$state（不会被代理）属性，值就是传递state对象，然后通过访问get的方式去访问state。在get中返回的值式：this._vm._data.$$state

        

  this._vm = new Vue({
    data: {
      // 在一个属性前面加上两个$, 那么这个属性是不被代理的
      $$state: options.state
    }
  })

  // 通过访问器的方式来访问state
  get state() {
    return this._vm._data.$$state
  }

                (2)实现单项数据流

                定义commit方法和dispatch方法，这两个方法都分别接受两个参数type（传递的数据类型）和payload(载荷信息)，获取到mutations和actions这两个选项。然后分别在commit和dispatch方法中通过type属性获取到函数并执行。commit中的函数执行的时候需要传递state和payload作为参数；dispatch中的函数在执行的时候需要传递store作为参数

 commit(type, payload) {
    const entry = options.mutations[type]
    entry && entry(state, payload)
  }
  dispatch(type, payload) {
    const entry = options.actions[type]
    entry && entry(store, payload)
  }

                （3）getters的实现

                        getters的实现借助了vue中的computed属性。遍历getters中的所有key，并在computed中通过key声明一个无参函数，并返回一个带有参数的state的函数（这个函数就是定义在getters中的函数），然后通过object.defineproperty一个getters对象。只提供get方法。在get方法中返回计算属性computed的结果

const computed = {};
 const getters = {}
 Object.keys(options.getters).forEach(key => {
   const fn = options.getters(key);
   computed[key] = function() {
     return fn(state)
   }
 })
 Object.defineProperty(getters, key, {
   // 定义get方式即可
   get() {

   }
 })
 new Vue({
   computed: 
 })