vuex 解读之 mapGetters

[cobish]

目标

有解读 mapState 的基础，解读起 mapGetters 会发现非常的得心应手。

本篇就来看看 mapGetters 的实现吧~

解读

先来看看 mapGetters 的使用方式：

import { mapGetters } from 'vuex'

export default {
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'anotherGetter',
    ]),

    ...mapGetters({
      // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
  }
}

定位到 src/helpers.js 文件，里面便有 mapGetters 的实现。代码不多，而且我们知道了 normalizeMap 方法的实现，那剩下的就好办了。

export function mapGetters (getters) {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    res[key] = function mappedGetter () {
      if (!(val in this.$store.getters)) {
        console.error(`[vuex] unknown getter: ${val}`)
      }
      return this.$store.getters[val]
    }
  })
  return res
}

经过 normalizeMap 的处理后，数据会变成这样：

// 以数组的方式传入
[
  {
    key: 'anotherGetter',
    value: 'anotherGetter'
  }
]

// 以对象的方式传入
[
  {
    key: 'doneCount',
    value: 'doneTodosCount'
  }
]

再经过 mapGetters 最后返回的 res 是：

{
  anotherGetter： function mappedGetter () {
    return this.$store.getters['anotherGetter']
  },

  doneCount: function mappedGetter () {
    return this.$store.getters['doneTodosCount']
  }
}

最后把 res 赋值到 computed 就是 mapGetters 的全部实现了。

总结

mapGetters 实现起来比 mapState 要简单一些，因为传参时没有函数。主要是用 key 与通过 value 找到 store 的 getters 拼接成 computed 需要的对象形式返回即可。