Vuex Getters

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

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

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

Vuex 允許我們?cè)?store 定義 “getters” （將它們視為 store 的計(jì)算屬性）。getter 函數(shù)將接收 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)
   }
 }
})

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

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

getter 函數(shù)也接收其他 getter 作為第二個(gè)參數(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ù)會(huì)將 store 中的 getter 映射到局部計(jì)算屬性中。

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

如果你要將 getter 映射為不同的名稱(chēng)，請(qǐng)使用一個(gè)對(duì)象：

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