Vuex之理解Getters的用法實例
1.什么是getters
在介紹state中我們了解到,在Store倉庫里,state就是用來存放數(shù)據(jù),若是對數(shù)據(jù)進(jìn)行處理輸出,比如數(shù)據(jù)要過濾,一般我們可以寫到computed中。但是如果很多組件都使用這個過濾后的數(shù)據(jù),比如餅狀圖組件和曲線圖組件,我們是否可以把這個數(shù)據(jù)抽提出來共享?這就是getters存在的意義。我們可以認(rèn)為,【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: {
// 使用對象展開運(yùn)算符將 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)文章
vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
詳解vue中的動態(tài)組件component和keep-alive
這篇文章主要介紹了詳解vue中的動態(tài)組件component和keep-alive的相關(guān)資料,這大家需要注意include屬性和exclude屬性只能用一個,不能同時使用,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue.js學(xué)習(xí)之vue-cli定制腳手架詳解
這篇文章主要給大家介紹了vue.js學(xué)習(xí)之vue-cli定制腳手架的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
關(guān)于Vite項目打包后瀏覽器兼容性問題的解決方案
本文主要介紹了關(guān)于Vite項目打包后瀏覽器兼容性問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue實現(xiàn)兩個列表之間的數(shù)據(jù)聯(lián)動的代碼示例
在Vue.js應(yīng)用開發(fā)中,列表數(shù)據(jù)的聯(lián)動是一個常見的需求,這種聯(lián)動可以用于多種場景,例如過濾篩選、關(guān)聯(lián)選擇等,本文將詳細(xì)介紹如何在Vue項目中實現(xiàn)兩個列表之間的數(shù)據(jù)聯(lián)動,并通過多個具體的代碼示例來幫助讀者理解其實現(xiàn)過程,需要的朋友可以參考下2024-10-10
vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10

