测试Getter
最后更新于：2022-04-02 01:18:24
## Vuex Getters
有时，我们可能需要基于 store 中的状态来计算推导状态，例如过滤一个项目列表，并对过滤结果进行计数：
~~~
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
~~~
如果多个组件需要用到这个推导后的状态，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。
Vuex 允许我们在 store 定义 “getters” （将它们视为 store 的计算属性）。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
~~~
现在我们可以轻松地在任意组件中使用 getter 了：
~~~
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
~~~
### 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'
})
~~~
';