Vuex之理解Getters的用法實例
1.什么是getters
在介紹state中我們了解到,在Store
倉庫里,state
就是用來存放數(shù)據(jù),若是對數(shù)據(jù)進行處理輸出,比如數(shù)據(jù)要過濾,一般我們可以寫到computed
中。但是如果很多組件都使用這個過濾后的數(shù)據(jù),比如餅狀圖組件和曲線圖組件,我們是否可以把這個數(shù)據(jù)抽提出來共享?這就是getters
存在的意義。我們可以認為,【getters】是store的計算屬性。
2.如何使用
定義:我們可以在store
中定義getters
,第一個參數(shù)是state
const getters = {style:state => state.style}
傳參:定義的Getters
會暴露為store.getters
對象,也可以接受其他的getters
作為第二個參數(shù);
使用:
computed: { doneTodosCount () { return this.$store.getters.doneTodosCount}
3.mapGetters
mapGetters
輔助函數(shù)僅僅是將store
中的getters
映射到局部計算屬性中,用法和mapState
類似
import { mapGetters } from 'vuex' computed: { // 使用對象展開運算符將 getters 混入 computed 對象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter',])} //給getter屬性換名字 mapGetters({ // 映射 this.doneCount 為 store.getters.doneTodosCount doneCount: 'doneTodosCount' })
4.源碼分析
wrapGetters
初始化getters
,接受3個參數(shù),store
表示當(dāng)前的Store
實例,moduleGetters
當(dāng)前模塊下所有的getters
,modulePath
對應(yīng)模塊的路徑
function `wrapGetters` (store, moduleGetters, modulePath) { Object.keys(moduleGetters).forEach(getterKey => { // 遍歷先所有的getters const rawGetter = moduleGetters[getterKey] if (store._wrappedGetters[getterKey]) { console.error(`[vuex] duplicate getter key: ${getterKey}`) // getter的key不允許重復(fù),否則會報錯 return } store._wrappedGetters[getterKey] = function `wrappedGetter` (store{ // 將每一個getter包裝成一個方法,并且添加到store._wrappedGetters對象中, return rawGetter( //執(zhí)行g(shù)etter的回調(diào)函數(shù),傳入三個參數(shù),(local state,store getters,rootState) getNestedState(store.state, modulePath), // local state //根據(jù)path查找state上嵌套的state store.getters, // store上所有的getters store.state // root state)}}) } //根據(jù)path查找state上嵌套的state function `getNestedState` (state, path) { return path.length ? path.reduce((state, key) => state[key], state): state}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式
近期在學(xué)習(xí)Vue時用elementUI時發(fā)現(xiàn)圖標(biāo)在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式,需要的朋友可以參考下2022-09-09Vue3?watchEffect的使用教程和相關(guān)概念
Vue?3?引入了?Composition?API,其中?watchEffect?是一個非常強大的工具,用于響應(yīng)式地追蹤依賴項的變化,本文將詳細介紹?watchEffect?的使用方法和相關(guān)概念,文中有詳細的代碼供大家參考,需要的朋友可以參考下2024-08-08vue3?+?async-validator實現(xiàn)表單驗證的示例代碼
表單驗證可以有效的過濾不合格的數(shù)據(jù),減少服務(wù)器的開銷,并提升用戶的使用體驗,今天我們使用?vue3?來做一個表單驗證的例子,需要的朋友跟隨小編一起學(xué)習(xí)下吧2022-06-06vue3+ts+elementPLus實現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實現(xiàn)v-preview指令,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05Vue使用Less與Scss實現(xiàn)主題切換方法詳細講解
目前,在眾多的后臺管理系統(tǒng)中,換膚功能已是一個很常見的功能。用戶可以根據(jù)自己的喜好,設(shè)置頁面的主題,從而實現(xiàn)個性化定制。目前,我所了解到的換膚方式,也是我目前所掌握的兩種換膚方式,想同大家一起分享2023-02-02Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中,使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作,這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06