上一期跟著文檔學(xué)Vuex（二）：狀態(tài)讀取我們講到如何將數(shù)據(jù)儲(chǔ)存到vuex并通過(guò)computed讀取潮针，但是有時(shí)候我們需要從store中的state派生出一些狀態(tài)未巫，例如對(duì)列表進(jìn)行過(guò)濾計(jì)數(shù)
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多個(gè)組件都要用到這個(gè)函數(shù)窥妇，我們要么復(fù)制這個(gè)函數(shù)盟蚣，要么抽取到一個(gè)共享函數(shù)然后再多處導(dǎo)入妓肢，不論哪種方法都不是很理想黔州，這時(shí)候getters誕生了，你可以把它認(rèn)為是store的計(jì)算屬性先蒋，當(dāng)store里的值變化時(shí)骇钦，getters會(huì)返回重新計(jì)算的值
gtters接受state為第一個(gè)參數(shù)
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)
}
}
})
那我們?cè)趺茨玫絞etters里返回的值呢
store.getters.doneTodos
getters也可以接受其他getters作為第二個(gè)參數(shù)
getters: {
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
我們可以很容易的在組件中使用它
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
同樣是用computed屬性返回
mapGetters 輔助函數(shù)
還記得 mapState 輔助函數(shù)嗎，他們的用法基本相同
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
'doneTodsCount',
'anotherGetter',
//.....
})
}
}
上面是getters里的方法名和你想要的計(jì)算屬性名字一樣時(shí)起的名字竞漾，如果你想領(lǐng)取名字眯搭，使用對(duì)象形式
mapGetters({
doneCount: 'doneTodoCount'
})
這樣，一個(gè)完整的getters的用法就講完了业岁，讓我們?cè)倩仡櫼幌掠梅巯桑?dāng)你需要對(duì)state里的數(shù)據(jù)進(jìn)行處理時(shí)，使用getters笔时，第一個(gè)參數(shù)是state棍好，第二個(gè)參數(shù)可以是其他getters，return一個(gè)處理好的數(shù)據(jù)允耿，這樣再用 store.getters.xxx調(diào)用借笙，也可以用mapGetters幫助我們更快的調(diào)用。好较锡，今天這期就到這里业稼，下期我們將講解更改state中的數(shù)據(jù)的方法，mutation~
引用
https://vuex.vuejs.org Vuex官方文檔
