前言

x 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

以官網的例子來說明，官網程式碼如下：

在元件中使用以下程式碼訪問：

this.$store.getters.doneTodosCount

一、說明

getters中的訪問器函式，預設會傳遞2個引數(state,getters)，使用第一個引數state可以訪問資料，使用getters引數可以訪問訪問器中的其它訪問器函式。大部分情況下只需要使用第一個引數，定義訪問器函式就只寫第一個引數即可，就像上面的例子。訪問這些訪問器屬性時，就像是元件中的計算屬性一樣呼叫，而不是像函式呼叫一樣。

這是有第二個引數getters時的使用例子，在元件中直接使用下面的程式碼呼叫，就像呼叫計算屬性一樣。第2個引數系統會預設傳遞。

this.$store.getters.doneTodos

&nbs客棧p;二、getter返回一個函式

通過讓 getter 返回一個函式，來實現給 getter 傳參。因此它的主要作用是傳遞引數。

在元件中直接訪問this.$store.getters.getTodoById時，返回的是一個函式。然後再進行函式呼叫的方式傳遞引數進去，就得到了函式的結果。

三、使用mapGetters物件展開

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

如果你想將一個 getter 屬性另取一個名字，使用物件形式：

這些知識點，光看文件有時候會很難理解，手動實踐一下，會很容易的消化理解。

vuex getter傳參方法

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

在使用了namespace的情況下呼叫：

this.$store.getters['yournwww.cppcns.comamespace/getProductByid'](id);

在未使用namespace的情況下呼叫：

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

總結

到此這篇關於vuex中Getter用法的文章就介紹到這了,更多相關Vuex Getter用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！