Vuex 2.0 源码分析（中）

                        Vuex 2.0 源码分析（中）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。

wrapGetters

了解完 registerAction 后，我们来看看 wrapGetters的定义：

function wrapGetters (store, moduleGetters, modulePath) {
  Object.keys(moduleGetters).forEach(getterKey => {
    const rawGetter = moduleGetters[getterKey]
    if (store._wrappedGetters[getterKey]) {
      console.error(`[vuex] duplicate getter key: ${getterKey}`)
      return
    }
    store._wrappedGetters[getterKey] = function wrappedGetter (store) {
      return rawGetter(
        getNestedState(store.state, modulePath), // local state
        store.getters, // getters
        store.state // root state
      )
    }
  })
}

wrapGetters 是对 store 的 getters 初始化，它接受 3个 参数， store 表示当前 Store 实例，moduleGetters 表示当前模块下的所有 getters, modulePath 对应模块的路径。细心的同学会发现，和刚才的 registerMutation 以及 registerAction 不同，这里对 getters 的循环遍历是放在了函数体内，并且 getters 和它们的一个区别是不允许 getter 的 key 有重复。

这个函数做的事情就是遍历 moduleGetters，把每一个 getter 包装成一个方法，添加到 store._wrappedGetters 对象中，注意 getter 的 key 是不允许重复的。在这个包装的方法里，会执行 getter 的回调函数，并把当前模块的 state，store 的 getters 和 store 的 rootState 作为它参数。来看一个例子：

export const cartProducts = state => {
  return state.cart.added.map(({ id, quantity }) => {
    const product = state.products.all.find(p => p.id === id)
    return {
      title: product.title,
      price: product.price,
      quantity
    }
  })
}

这里我们定义了一个 getter，通过刚才的 wrapGetters 方法，我们把这个 getter 添加到 store._wrappedGetters 对象里，这和回调函数的参数 state 对应的就是当前模块的 state，接下来我们从源码的角度分析这个函数是如何被调用，参数是如何传递的。

我们有必要知道 getter 的回调函数的调用时机，在 Vuex 中，我们知道当我们在组件中通过 this.$store.getters.xxxgetters 可以访问到对应的 getter 的回调函数，那么我们需要把对应 getter 的包装函数的执行结果绑定到 `this.$store 上。这部分的逻辑就在 resetStoreVM 函数里。我们在 Store 的构造函数中，在执行完 installModule 方法后，就会执行 resetSt