vuex Getter

我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数：

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

多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex允许我们在store中定义“getter”(可以认为是store的计算属性)。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生了改变才会被重新计算。
Getter接受state作为其第一个参数：

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)
}
}
})

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返回函数，来实现给getter传参。在你对store里的数组进行查询时非常有用。

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 {mapGetters} from 'vuex'
export default {
//...
computed:{
//使用对象展开运算符将getter混入computed对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
//...
])
}
}

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

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

本文来源vuex官网