上一期跟着文档学Vuex(二):状态读取我们讲到如何将数据储存到vuex并通过computed读取,但是有时候我们需要从store中的state派生出一些状态,例如对列表进行过滤计数
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件都要用到这个函数,我们要么复制这个函数,要么抽取到一个共享函数然后再多处导入,不论哪种方法都不是很理想,这时候getters诞生了,你可以把它认为是store的计算属性,当store里的值变化时,getters会返回重新计算的值
gtters接受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)
}
}
})
那我们怎么拿到getters里返回的值呢
store.getters.doneTodos
getters也可以接受其他getters作为第二个参数
getters: {
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
我们可以很容易的在组件中使用它
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
同样是用computed属性返回
mapGetters 辅助函数
还记得 mapState 辅助函数吗,他们的用法基本相同
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
'doneTodsCount',
'anotherGetter',
//.....
})
}
}
上面是getters里的方法名和你想要的计算属性名字一样时起的名字,如果你想领取名字,使用对象形式
mapGetters({
doneCount: 'doneTodoCount'
})
这样,一个完整的getters的用法就讲完了,让我们再回顾一下用法,当你需要对state里的数据进行处理时,使用getters,第一个参数是state,第二个参数可以是其他getters,return一个处理好的数据,这样再用 store.getters.xxx调用,也可以用mapGetters帮助我们更快的调用。好,今天这期就到这里,下期我们将讲解更改state中的数据的方法,mutation~
引用
https://vuex.vuejs.org Vuex官方文档