我们需要从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官网
