vuex深入学习 --- Getter

vuex深入学习 — Getter

特点:

1.getter相当于组件中计算属性,getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
2.适合当以一个state被多次使用时
3.getters 接受 state作为第一个参数

  getters: {
    // ...
    // 可以接受其他的getters作为参数
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  } 

访问方式: 2种
1. 通过属性访问 this.$store.getters.doneTodosCount
注意: getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

2.通过方法访问
你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。

      getters: {
        // ...
        getTodoById: (state) => (id) => {
          return state.lists.find(list => list.id === id)
        }
      }

调用: this.$store.getters.getTodoById(2)
注意: getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果

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

    import { mapGetters } from 'vuex'

    export default {
      // ...
      computed: {
      // 使用扩展运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // 把'this.doneTodos'映射为'this.$store.getters.doneTodos', 取别名用对象形式
          done: 'doneTodos'
          // ...
        ])
      }
    }