Vuex 允許我們在 store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）畔况。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來慧库，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算跷跪。
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)
}
}
})
(1) 通過屬性訪問
- Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問這些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
- Getter 也可以接受其他getter 作為第二個(gè)參數(shù)：
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length;
}
}
store.getters.doneTodosCount // 1
- 我們可以很容易的在任何組件中使用它：
computed: {
doneTodosCount (){
return this.$store.getters.doneTodosCount;
}
}
(2) 通過方法訪問
你也可以通過讓 getter 返回一個(gè)函數(shù)齐板，來實(shí)現(xiàn)給 getter 傳參
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
注意吵瞻，getter 在通過方法訪問時(shí)葛菇，每次都會(huì)去進(jìn)行調(diào)用，而不會(huì)緩存結(jié)果橡羞。
(3) mapGetters 輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
經(jīng)過 mapGetters 函數(shù)調(diào)用后的結(jié)果熟呛，如下所示：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
doneTodosCount() {
return this.$store.getters['doneTodosCount']
},
anotherGetter() {
return this.$store.getters['anotherGetter']
}
}
}
再看一個(gè)參數(shù) mapGetters 參數(shù)是對(duì)象的例子：
computed: mapGetters({
// 映射 this.doneCount 到 store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
經(jīng)過 mapGetters 函數(shù)調(diào)用后的結(jié)果，如下所示：
computed: {
doneCount() {
return this.$store.getters['doneTodosCount']
}
}
