Vuex中的Getters

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

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

示例：

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

如下所示：

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

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

Getters的使用

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 辅助函数

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'
})