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)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算。
getter 就類(lèi)似于我們定義 java 實(shí)體類(lèi)中的 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ò)屬性訪(fǎng)問(wèn) getter
Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪(fǎng)問(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ò)屬性訪(fǎng)問(wèn)時(shí)是作為 Vue 的響應(yīng)式系統(tǒng)的一部分緩存其中的。
三、通過(guò)方法訪(fǎng)問(wèn)
你也可以通過(guò)讓 getter 返回一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)給 getter 傳參。在你對(duì) store 里的數(shù)組進(jìn)行查詢(xú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)文章希望大家以后多多支持腳本之家！
- vuex中的state、getters、mutations、actions之間的關(guān)系解讀
- Vue3使用Vuex之mapState與mapGetters詳解
- vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程
- vuex中g(shù)etters的基本用法解讀
- Vuex中如何getters動(dòng)態(tài)獲取state的值
- VueX?mapGetters獲取Modules中的Getters方式
- vuex通過(guò)getters訪(fǎng)問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
- 記一次vuex的mapGetters無(wú)效原因及解決
相關(guān)文章
Vue與Node.js通過(guò)socket.io通信的示例代碼
這篇文章主要介紹了Vue與Node.js通過(guò)socket.io通信的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue3使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)
postcss-px-to-viewport 是一個(gè) PostCSS 插件,它可以將 px 單位轉(zhuǎn)換為視口單位,下面我們就看看如何使用postcss-px-to-viewport實(shí)現(xiàn)頁(yè)面自適應(yīng)吧2024-01-01
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue監(jiān)聽(tīng)dom大小改變案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue中v-model、v-bind和v-on三大指令的區(qū)別詳解
v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關(guān)于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
關(guān)于Vue單頁(yè)面骨架屏實(shí)踐記錄
這篇文章主要給大家介紹了關(guān)于Vue單頁(yè)面骨架屏實(shí)踐的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
Vue3前端適配Markdown格式問(wèn)題及最佳解決方案
Markdown?編輯器作為一種輕量級(jí)文本格式,已被廣泛應(yīng)用于博客、文檔編輯、評(píng)論系統(tǒng)等場(chǎng)景,下面這篇文章主要介紹了Vue3前端適配Markdown格式問(wèn)題及最佳解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
element?Drawer?抽屜無(wú)法渲染問(wèn)題及解決
這篇文章主要介紹了element?Drawer?抽屜無(wú)法渲染問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的2023-04-04
Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07