Vuex Getters

有時，我們可能需要基于 store 中的狀態(tài)來計算推導(dǎo)狀態(tài)，例如過濾一個項目列表，并對過濾結(jié)果進(jìn)行計數(shù)：

computed: {
 doneTodosCount () {
   return this.$store.state.todos.filter(todo => todo.done).length
 }
}

如果多個組件需要用到這個推導(dǎo)后的狀態(tài)，那我們就必須到處重復(fù)寫該計算屬性函數(shù)；或者將其提取到一個公共的工具函數(shù)中，并將公共函數(shù)多處導(dǎo)入 - 兩者都不太理想。

Vuex 允許我們在 store 定義 “getters” （將它們視為 store 的計算屬性）。getter 函數(shù)將接收 state 作為第一個參數(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)
   }
 }
})

這些 getter 函數(shù)將導(dǎo)出在 store.getters 對象上：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getter 函數(shù)也接收其他 getter 作為第二個參數(shù)：

getters: {
 // ...
 doneTodosCount: (state, getters) => {
   return getters.doneTodos.length
 }
}

store.getters.doneTodosCount // -> 1

現(xiàn)在我們可以輕松地在任意組件中使用 getter 了：

computed: {
 doneTodosCount () {
   return this.$store.getters.doneTodosCount
 }
}

mapGetters 工具函數(shù)

mapGetters 工具函數(shù)會將 store 中的 getter 映射到局部計算屬性中。

import { mapGetters } from 'vuex'
export default {
 // ...
 computed: {
   // 使用對象擴(kuò)展操作符把 getter 混入到 computed 中
   ...mapGetters([
     'doneTodosCount',
     'anotherGetter',
     // ...
   ])
 }
}

如果你要將 getter 映射為不同的名稱，請使用一個對象：

    mapGetters({ 
 	
    // 映射 this.doneCount 到 store.getters.doneTodosCount   	
    doneCount: 'doneTodosCount'   	
    })