Vuex里的Getter

1.如何定义Getter

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

const store=new Vuex.Store({
 state:{
  todos:[
   { id:1,text:'1w',done:true },
    { id:2,text:'1e',done:false }
  ]
 },
 getters:{//Getter接受state作为其第一个参数
  doneTools:state =>{
   return state.todos.filter(todo => todo.done)//返回值会根据依赖被缓存起来
  }
 }
})

Getter也可以接受其他getter作为第二个参数,也就是getter间可以相互访问：

getters:{
doneTodos:state =>{
   return state.todos.filter(todo => todo.done)
  },
 doneTodosCount:(state,getters) => {
  return getters.doneTodos.length //doneTodosCout这个Getter使用了doneTodos这个getter
 }
}


store.getters.doneTodosCount //  ->1

2.如何使用Getter（在store中，在组件中）

(1)Getter会暴露为store.getters对象，在store中可以以属性的方式访问。

store.getters.doneTodos //->[{ id:1.tet:'1w',done:true }]

在任何组件中使用是用this.$store.getters.getterName

computed:{
 doneTodosCount(){
  return this.$store.getters.doneTodosCount
 }
}

(2)通过方法访问

通过方法访问时，每次都会去调用，不会缓存。

getters:{
 getTodoById:(state) => (id) => {
  return state.todos.find(todo => todo.id==id)
 }
}

store.getters.getTodoById(2) // -> { id: 2,text: '...',done: false }

mapGetters辅助函数

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

import { mapGetterd } from 'vuex'
export default {
 computed:{
  ...mamGetters([
   'doneTodosCount',
   'antherGetter'
  ])
 }
}

这个情况在State里也有谈到。

如果需要对一个getter属性另取一个名字，使用对象形式

mapGetters([
 doneCount:'doneTodosCount' //映射this.doneCount为store.getters.doneTodosCount
])