Vuex中的Getters

在 Store 仓库中，state 是用来存放数据的，如果要对数据进行处理输出，比如数据要过滤，一般我们可以写到 computed 中。但是如果很多组件都使用这个过滤后的数据，我们可以考虑把这个数据提出来共享。这就是 getters 存在的意义，我们可以将 getters 认为是 store 的计算属性(computed)。

就像计算属性一样，getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

示例：

假设有一个关于考试分数的数组，我们需要在很多页面中使用，但是只需要显示不及格的成绩，此时我们就要过滤掉不符合要求的数据。

如下所示：

computed: {scoreArr(){return this.$store.state.score.filter(item => item < 60) 
    }
}

如果很多地方要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它，但是不管哪种方式都不是很理想。

Vuex 允许我们在 store 中定义getters，第一个参数为 state：

const getters = {style:state => state.style}

Getters 还会将 store.getters 对象暴露出去，我们可以以属性的形式访问这些值：

computed: {doneTodosCount () {return this.$store.getters.doneTodosCount}
}

Getters 也可以接受其他的 getters 作为第二个参数：

getters: {doneTodosCount: (state, getters) => {return getters.doneTodos.length}
}

mapGetters 辅助函数将 store 中的 getters 映射到局部计算属性中，用法和 mapState 类似。

首先也是需要引入 mapGetters 函数：

import {mapGetters} from 'vuex'

引入后就可以开始使用了：

import {mapGetters} from 'vuex'

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

如果想给一个 getters 属性另取一个名字，可以使用对象形式，例如：

// 给 getter 属性换名字
mapGetters({
    // 映射 this.doneCount 为 store.getters.doneTodosCount
     doneCount: 'doneTodosCount'
})

示例：

Getters 的使用

mapGetters 辅助函数