前言

Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

以官網(wǎng)的例子來(lái)說(shuō)明，官網(wǎng)代碼如下：

在組件中使用以下代碼訪問(wèn)：

this.$store.getters.doneTodosCount

一、說(shuō)明

getters中的訪問(wèn)器函數(shù)，默認(rèn)會(huì)傳遞2個(gè)參數(shù)(state, getters)，使用第一個(gè)參數(shù)state可以訪問(wèn)數(shù)據(jù)，使用getters參數(shù)可以訪問(wèn)訪問(wèn)器中的其它訪問(wèn)器函數(shù)。大部分情況下只需要使用第一個(gè)參數(shù)，定義訪問(wèn)器函數(shù)就只寫第一個(gè)參數(shù)即可，就像上面的例子。訪問(wèn)這些訪問(wèn)器屬性時(shí)，就像是組件中的計(jì)算屬性一樣調(diào)用，而不是像函數(shù)調(diào)用一樣。

這是有第二個(gè)參數(shù)getters時(shí)的使用例子，在組件中直接使用下面的代碼調(diào)用，就像調(diào)用計(jì)算屬性一樣。第2個(gè)參數(shù)系統(tǒng)會(huì)默認(rèn)傳遞。

this.$store.getters.doneTodos

 二、getter返回一個(gè)函數(shù)

通過(guò)讓 getter 返回一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)給 getter 傳參。因此它的主要作用是傳遞參數(shù)。

在組件中直接訪問(wèn) this.$store.getters.getTodoById時(shí)，返回的是一個(gè)函數(shù)。然后再進(jìn)行函數(shù)調(diào)用的方式傳遞參數(shù)進(jìn)去，就得到了函數(shù)的結(jié)果。

 三、使用mapGetters 對(duì)象展開

在組件的計(jì)算屬性中，直接使用以下方式，可以很方便的引用getter屬性，然后就像調(diào)用普通的計(jì)算屬性一樣的使用。

如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：

這些知識(shí)點(diǎn)，光看文檔有時(shí)候會(huì)很難理解，手動(dòng)實(shí)踐一下，會(huì)很容易的消化理解。

vuex getter傳參方法

getters: {
    getProductByid: (state) => (id) =>
    {
        return state.productList.find(item => item.id === id);
    }
}

在使用了namespace的情況下調(diào)用：

this.$store.getters['yournamespace/getProductByid'](id);

在未使用namespace的情況下調(diào)用：

this.$store.getters.getProductByid(id);

總結(jié)

到此這篇關(guān)于vuex中Getter用法的文章就介紹到這了,更多相關(guān)Vuex Getter用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論