Vuex核心概念之Getters

1. 问题提出：我们有时可能希望对 vuex 中 state 的属性进行一些操作，再展示或者被用于其他方法中，那么假如在多个组件中都需要这个属性，会导致重复性操作.

例如：一个存放数字0-50的数组，我们希望选出大于20的部分，那么在组件中，我们需要使用计算属性 computed 去选出相应的数，再进行展示，如果多个组件都需要这样做，那么就得在多个组件中，都定义一个计算属性，这样的重复性操作极其不好。

一个办法是将其抽象到一个js文件，自定义函数对其完成预先操作，我们只需要在组件中引入并调用这个方法即可，但同样的我们还是需要在每一个组件中都引入这个方法，本质上还是没有解决重复性操作.

2. 问题解决：我们由 computed 计算属性可以联想到，对于 vuex 中 state 的属性，同样应该有一个类似 computed 作用的属性，没错，这个属性就是 getters. 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

3. 一个示例：

  state: {
    todos: [
      { id: 1, text: 'done true', done: true },
      { id: 2, text: 'done false', done: false }
    ]
  }

选出 done 为  true 的对象，

  getters: {
    doneTodos: (state) => {
      return state.todos.filter(todo => {
        return todo.done;
      })
    }
  }

在组件中使用 mapGetters 辅助函数，

  export default {
    name: "Getters",
    computed: {
      ...mapGetters({
        doneValue: 'doneTodos',
        doneValueLength: 'doneTodosLength'
      })
    }
  }

<template>
  <div>
    <h2>Hello</h2>
    <h4>{{doneValue}}</h4>
    <h4>{{$store.getters.doneTodos}}</h4> // 不借助 mapGetters 直接使用 $store.getters 获取 vuex 中 getters 的方法
    <h4>{{doneValueLength}}</h4>
  </div>
</template>

解释一下：此处 ...mapGetters 中的 doneValue 是 doneTodos 的别名，如果不希望起别名，直接使用 getters 中命名，可以使用数组形式 mapGetters

    computed: {
      ...mapGetters(['doneTodos', 'doneTodosLength'])
    }

<template>
  <div>
    <h4>{{doneTodos}}</h4>
    <h4>{{doneTodosLength}}</h4>
  </div>
</template>

 4. getters 中，方法第一个参数为 state，第二个参数为 getters ，可以获取其他 getter 方法.  例如：接上一个例子，我们想统计 done 为 true 的对象的数量：

  getters: {
    doneTodos: (state) => {
      return state.todos.filter(todo => {
        return todo.done;
      })
    },
    doneTodosLength: (state, getters) => {
      return getters.doneTodos.length;
    }
  }