說說 Vuex 的 getters 屬性

2021-09-18 04:17:25 字數 928 閱讀 8333

假設我們在 vuex 中定義了乙個陣列:

const store = new vuex.store(

...})

業務場景希望過濾出大於 5 的數。馬上想到的方法可能的是:在元件的計算屬性中進行過濾:

}

效果:

功能雖然實現了,但如果其它元件也需要過濾後的資料,那麼就得把 index.vue 中的計算過濾**複製出來。如果過濾規則發生變化,還得一一修改這些元件中的計算屬性,很難維護。這種場景下,我們就可以使用 getters 屬性啦o(∩_∩)o~

main.js:

const store = new vuex.store(,

getters: }})

index.vue:

效果達到了,而且只需要在一處維護過濾規則即可。

getter 可以依賴其它已經定義好的 getter。比如我們需要統計過濾後的列表數量,就可以依賴之前定義好的過濾函式。

main.js:

const store = new vuex.store(,

getters: ,

listcount: (state, getters) => }})

index.vue:

過濾後的列表:}

列表長度:}

效果:

Vuex之getters的使用方法

getters其實就是store的計算屬性,對state裡面的狀態進行過濾處理,用法與元件自身的計算屬性一模一樣。在store資料夾下的index.js中 import vuex from vuex import vue from vue 1.安裝外掛程式 vue.use vuex const st...

Vuex中getters動態獲取state的值

在做專案時,getters裡有很多冗餘 但是仔細一看可以根據引數來解決,於是決定使用傳參來進行獲取,減少 冗餘。需求 在getters裡能夠根據值動態獲取到people的元素。經過多次嘗試,最終得到下面的 state.js 如下 export default,getters.js 如下 const ...

Vue學習筆記 Vuex之Getters

getters只有當資料發生改變時才會重新倍計算 類似於計算屬性 需求 1 獲取uers年齡 age 大於18歲的資料 state getters getnum state,getters 需求 2 獲取uers年齡 age 大於18歲資料的數量 getters getnum state,gette...