Vuex getters源码分析

目录

一.简介

 二.源码

---

一.简介

Vuex允许我们在store中定义"getter"(可以认为是store的计算属性),就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算每个getter对应的匿名函数可以带四个参数，分别是当前模块的state、getter和根模块的state、getter,例如:

<div id="app">
    <p>{{reverseMessage}}</p>
</div>
<script>
    const store = new Vuex.Store({
        state:{reverseMessage:'Hello Vue!'},
        getters:{
            reverseMessage:function(state){return state.reverseMessage.split('').reverse().join('');}
        }
    })
    new Vue({
        el:'#app',
        store,
        computed:{
            reverseMessage:function(){return this.$store.getters.reverseMessage}
        }
    })
</script>

 二.源码

在创建Vuex.Store()初始化时执行installModule()安装根模块，与getter相关的如下:

function installModule(store, rootState, path, module, hot) {  //安装模块
  /*略*/
  module.forEachGetter(function (getter, key) {  //遍历module模块的getters对象，如果找到了，则执行这个匿名函数 参数1:每个getter值 key:对应的键名
    var namespacedType = namespace + key; //拼凑命名空间+键名，例如:a/computedCount
    registerGetter(store, namespacedType, getter, local); //依次执行registerGetter
  });
  /*略*/
}

registerGetter用于注册每个getter，如下:

function registerGetter(store, type, rawGetter, local) {
  //注册getter
  if (store._wrappedGetters[type]) {
    //如果store._wrappedGetters下已经有key了
    {
      console.error("[vuex] duplicate getter key: " + type); //报错，即不允许重复
    }
    return;
  }
  store._wrappedGetters[type] = function wrappedGetter(store) {
    //保存到store._wrappedGetters对应的type里
    return rawGetter(
      //执行store函数 四个参数分别为local state、local getters、root state、root getters
      local.state, // local state
      local.getters, // local getters
      store.state, // root state
      store.getters // root getters
    );
  };
}

这样在 store._wrappedGetters中就存储了对应的getter，getter是一个匿名函数，函数有一个参数是store,为vuex.store()的实例，创建vue实例时会将其传入，这样在geter里就能访问到根模块的state和getters了

Vuex到resetStoreVM()创建Vue实例时，与getter有关的逻辑如下:

function resetStoreVM(store, state, hot) {
  //重新存储数据
  var oldVm = store._vm;

  // bind store public getters
  store.getters = {};
  var wrappedGetters = store._wrappedGetters; //获取store的所有getter信息，也就是上面保存的数据，每个值是一个匿名函数
  var computed = {}; //用于存储最后的计算属性
  forEachValue(wrappedGetters, function (fn, key) {
    //遍历wrappedGetters
    // use computed to leverage its lazy-caching mechanism
    computed[key] = function () {
      return fn(store);
    }; //将computed[key]定义为一个函数表达式，内部返回fn()执行后的结果，传入store参数，这样在geter里就能访问到根模块的state和getters了
    Object.defineProperty(store.getters, key, {
      //设置store.getters的key的访问器属性,这样就可以通过store.getters.aaa访问到某个具体的值了
      get: function () {
        return store._vm[key];
      },
      enumerable: true, // for local getters
    });
  });

  /*略*/
}

state内信息被修改，getter内信息会自动更新，是由于Vue的响应式设计