vuex中Getter的用法詳解

前言

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

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

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

this.$store.getters.doneTodosCount

一、說(shuō)明

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

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

this.$store.getters.doneTodos

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

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

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

 三、使用mapGetters 對象展開(kāi)

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

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

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

vuex getter傳參方法

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

在使用了namespace的情況下調用：

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

在未使用namespace的情況下調用：

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

總結

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