Vuex getters
Vuex 允许在 store 中定义 getters,视作 store 的计算属性 像计算属性 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)
    }
  }
})
getters 访问器函数 默认传递2个参数(state, getters)
第一个参数state访问数据 用getters参数访问访问器中的其它访问器函数
多数情况只需第一个参数
定义访问器函数就只写第一个参数即可
访问访问器属性时，就像组件中的计算属性一样，不是像函数调用一样
getters:{
  doneTodosCount:(state,getters)=>{
    return getters.doneTodos.length
  }
}
有第二个参数getters 在组件中直接调用，像调用计算属性一样
第2个参数系统会默认传递
this.$store.getters.doneTodos
getter返回一个函数
来实现给 getter 传参 主要作用是传递参数
getters:{
 getTodoById:(state)=>(id)=>{
   return state.todos.find(todo=>todo.id==id)
 }
}
组件中直接访问 this.$store.getters.getTodoById
时返回的是一个函数,再函数调用的方式传递参数进去，就得到了函数的结果

使用mapGetters 对象展开 在组件的计算属性中 直接使用以下方式方便引用getter属性，就像调用普通的计算属性一样的使用
import { mapGetters } from 'vuex'
export default{
  computed:{
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
   }
}
如果 getter 属性另取名字，用对象形式：
mapGetters([
   doneCount:'doneTodosCount'   //this.doneCount 映射为 this.$store.getters.doneTodosCount
])
需要从 store 中的 state 派生出状态 如对列表过滤并计数
computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}
多个组件用到此属性 复制函数或抽取到共享函数后在多处导入它 都不理想
Vuex 允许在 store 中定义getter（认为是 store 计算属性）
像计算属性 getter 返回值会根据依赖被缓存起来 且只有当它的依赖值发生改变才会被重新计算
Getter 接受 state 为第一个参数

#通过属性访问
Getter 暴露为 store.getters 对象以属性的形式访问
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 接受其他 getter 作为第二个参数
getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1 容易在任何组件中使用
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存
#通过方法访问 通过让 getter 返回一个函数实现给 getter 传参
对 store 里的数组进行查询
getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
getter 通过方法访问时，每次去调用，不缓存结果
#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'
})