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