vuex剖析

vuex是专门为Vue.js设计的状态管理工具，它采用集中式存储管理应用的所有状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex的构成

• 引入State、Getter对状态进行定义

• 使用Mutation、Action对状态进行修改

• 使用Module对状态进行模块化分割

• 引入插件对状态进行快照、记录、跟踪等

• 提供mapState、mapGetters、mapActions、mapMutations辅助函数方便开发者处理store

  

vuex原理

vuex的store是如何注入到组件中的

• 通过vue的mixin机制，在install函数中借助于vue的beforeCreate生命周期函数

  Vue.mixin({ beforeCreate: vuexInit })
  

• 在beforeCreate中调用vuexInit将store挂载到当前实例上

  function vuexInit () {
      const options = this.$options
      // store injection
      if (options.store) {
          // 根组件通过options.store挂载
          this.$store = typeof options.store === 'function'
              ? options.store()
              : options.store
          // 其余组件通过父组件上的store挂载
      } else if (options.parent && options.parent.$store) {
          this.$store = options.parent.$store
      }
  }
  

  

vuex的state和getter是如何映射到各个组件实例中自动更新的

state

class Store {
    construcor () {
        resetStoreVM()
    }
    get state () {
        return this._vm._data.$$state
    }
}

function resetStoreVM() {
       store._vm = new Vue({
           data: {
               $$state: state
           },
          computed
    })
}

从源码得知，当使用this.$store.state.xxx时会被代理到store._vm._data.$$state上，而store._vm是一个Vue实例，由于示例中的data是响应式的，所以$$state也是响应式的，那么当更新state时，所有相关组件中的state也会自动更新

getter

function resetStoreVM() {
    forEachValue(wrappedGetters, (fn, key) => {
        // use computed to leverage its lazy-caching mechanism
        // direct inline function use will lead to closure preserving oldVm.
        // using partial to return function with only arguments preserved in closure environment.
        computed[key] = partial(fn, store)
        Object.defineProperty(store.getters, key, {
            get: () => store._vm[key],
            enumerable: true // for local getters
        })
    })
}

从源码得知，当使用this.$store.getter.xxx时会被代理到store._vm.xxx，其中添加computed属性

从上面可以看出，vuex中的state是借助于一个Vue.js实例，将state存入实例的data中；Vuex中的getter则是借助于实例的计算属性computed实现数据监听