Vuex入門學(xué)習(xí)之Getter詳解
一、引入Getter
有時候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對列表進(jìn)行過濾并計(jì)數(shù)：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}如果有多個組件需要用到此屬性，我們要么復(fù)制這個函數(shù)，或者抽取到一個共享函數(shù)然后在多處導(dǎo)入它——無論哪種方式都不是很理想。
Vuex 允許我們在 store 中定義 getter （可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算。
getter 就類似于我們定義 java 實(shí)體類中的 getter方法。
Getter 接受 state 作為其第一個參數(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
Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值：
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Getter 也可以接受其他 getter 作為第二個參數(shù)：
getters: {
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // -> 1
我們可以很容易地在任何組件中使用它：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
注意，getter 在通過屬性訪問時是作為 Vue 的響應(yīng)式系統(tǒng)的一部分緩存其中的。
三、通過方法訪問
你也可以通過讓 getter 返回一個函數(shù)，來實(shí)現(xiàn)給 getter 傳參。在你對 store 里的數(shù)組進(jìn)行查詢時非常有用。
getters: {
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
四、mapGetters 輔助函數(shù)
mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用對象展開運(yùn)算符將 getter 混入 computed 對象中
...mapGetters([
'doneTodosCount',
'anotherGetter'
])
}
}
如果你想將一個 getter 屬性另取一個名字，使用對象形式：
...mapGetters({
// 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
到此這篇關(guān)于Vuex入門學(xué)習(xí)之Getter詳解的文章就介紹到這了,更多相關(guān)Vuex的Getter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vue全局接入百度地圖的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下2023-09-09
本文通過圖文并茂的形式給大家介紹了vue-cli + sass 的正確打開方式，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
Vue使用pages構(gòu)建多頁應(yīng)用的實(shí)現(xiàn)步驟
在大部分實(shí)際場景中,我們都可以構(gòu)建單頁應(yīng)用來進(jìn)行項(xiàng)目的開發(fā)和迭代,然而對于項(xiàng)目復(fù)雜度過高或者頁面模塊之間差異化較大的項(xiàng)目,我們可以選擇構(gòu)建多頁應(yīng)用來實(shí)現(xiàn),那么什么是多頁應(yīng)用,本文就給大家介紹了Vue使用pages構(gòu)建多頁應(yīng)用的實(shí)現(xiàn)步驟2024-12-12
這篇文章主要介紹了vue項(xiàng)目的訪問端口及其設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。2022-10-10
Vue3.5中響應(yīng)式Props解構(gòu)的編譯原理
在Vue3.5版本中,響應(yīng)式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應(yīng)性,文通過編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應(yīng)性,編譯過程中的defineProps宏函數(shù)處理,通過AST和上下文操作實(shí)現(xiàn)變量替換,從而讓解構(gòu)后的變量在運(yùn)行時維持響應(yīng)式狀態(tài)2024-09-09
這篇文章主要給大家介紹了關(guān)于vue如何動態(tài)實(shí)時的顯示時間，以及vue時間戳 獲取本地時間實(shí)時更新的相關(guān)資料，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
在日常開發(fā)后端管理系統(tǒng)項(xiàng)目中,用于展示數(shù)據(jù)多會用表格進(jìn)行展示,下面這篇文章主要給大家介紹了關(guān)于vue3+elementplus基于el-table-v2封裝公用table組件的相關(guān)資料,需要的朋友可以參考下2023-12-12
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10