4. Vuex Getter

Vuex Getter

• 概述

  Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• Getter 属性的使用

  现 Vuex 中有如下数据，在子组件调用时需对数据进行过滤；

  const store = new Vuex.Store({
    state: {
      todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
      ]
    }
  })
  

  1. 使用各个组件内的计算属性（computed） 实现

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

  computed: {
    doneTodosCount () {
      return this.$store.state.todos.filter(todo => todo.done).length
    }
  }
  

  2. 使用 Vuex 的 Getter 属性实现

  Getter 可接收两个参数，第一个为 state ，第二个参数为 getters 。

  const store = new Vuex.Store({
    state: {
      todos: [
        { id: 1, text: '...', done: true },
        { id: 2, text: '...', done: false }
      ]
    },
    getters: {
      doneTodos: state => {
        return state.todos.filter(todo => todo.done)
      },
      doneTodosCount: (state, getters) => {
        return getters.doneTodos.length
      }
    }
  })
  

• Getter 属性的访问

  1. 通过属性访问

  // 子组件的属性方法
  computed: {
    doneTodos() {
    	return this.$store.getters.doneTodos 
    },
    doneTodosCount () {
      return this.$store.getters.doneTodosCount
    }
  }
  

  2. 通过 mapGetters 辅助函数访问

  mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

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

  如果你想将一个 getter 属性另取一个名字，使用对象形式：

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

• Getter 的参数传递

  由于 Getter 只能接收两个参数 state 和 getters ，如想实现组件向 Getter 的参数传递，则需要采用闭包的形式返回一个函数。

  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id) // 等同于如下写法
    }
    // getTodoById(state) {
    //   let find = function(id) {
    //     return state.todos.find(todo => todo.id === id)
    //   }
    //   return find
    // }
  }
  

  // 子组件的属性方法
  computed: {
    doneTodoById(id) {
    	return this.$store.getters.getTodoById(id) 
    }
  }