## 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' }) ~~~