# Getters 有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数: ``` js computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } ``` 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它 —— 无论哪种方式都不是很理想。 Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数: ``` js 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) } } }) ``` Getters 会暴露为 `store.getters` 对象: ``` js store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] ``` Getters 也可以接受其他 getters 作为第二个参数: ``` js getters: { // ... doneTodosCount: (state, getters) => { return getters.doneTodos.length } } ``` ``` js store.getters.doneTodosCount // -> 1 ``` 我们可以很容易地在任何组件中使用它: ``` js computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } ``` ### `mapGetters` 辅助函数 `mapGetters` 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性: ``` js import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } ``` 如果你想将一个 getter 属性另取一个名字,使用对象形式: ``` js mapGetters({ // 映射 this.doneCount 为 store.getters.doneTodosCount doneCount: 'doneTodosCount' }) ```