vuex中mapState思想應(yīng)用
背景:
在需求開發(fā)過程中,有的接口返回的結(jié)果中有很多字段需要展示到頁面上。通??梢詫⑦@些字段在.vue文件中封裝為計算屬性,或者重新將對應(yīng)字段賦值到 data 中的字段來達(dá)到便于使用的目的。如下:
computed(){ count1(){ return this.targetObj.count1 }, count2(){ return this.targetObj.count2 }, // ... // 想象一下。你要寫 5 遍 或者 10 遍類似的代碼 }
但是不管哪種方法,都會帶來大量的代碼冗余,極為難受。為解決這種現(xiàn)象,本文借用了使用了vuex
中 map
方法的思想,極大的縮減了冗余代碼,并且能夠?qū)?shù)據(jù)獲取做統(tǒng)一的容錯處理。
1、map方法
vuex 中基本的 state 提取使用方法,可通過 以下方式:
computed(){ count(){ return this.$store.count } }
同時 vuex
也同樣注意到了問題,當(dāng) store 中要獲取的數(shù)據(jù)很多時,這種方式將會產(chǎn)生極大的代碼冗余,重復(fù)代碼遍地走。你將會看到大量的計算屬性的定義,以及長鏈路的對象屬性提取。因此vuex
定義了一種 map 方法,用來批量的獲取 store
中的指定數(shù)據(jù)。
這種 map
方法實際上就是一種 工廠函數(shù)(高階函數(shù)),用來生產(chǎn)特定形式的函數(shù)。以下是源碼,可以看到,mapState
其實最終會返回一個對象 res
, res
中的每個屬性都是一個方法,而這個方法返回 state
中的值。
var mapState = normalizeNamespace(function (namespace, states) { // 定義一個對象 用于存儲 獲取指定屬性的方法 var res = {}; normalizeMap(states).forEach(function (ref) { var key = ref.key; var val = ref.val; // 定義 獲取指定對象中指定屬性的方法 res[key] = function mappedState () { var state = this.$store.state; var getters = this.$store.getters; // 根據(jù) namespace 查找指定的 store 模塊對象 if (namespace) { var module = getModuleByNamespace(this.$store, 'mapState', namespace); if (!module) { return } state = module.context.state; getters = module.context.getters; } // 獲取通過指定 namespace 得到的 store module 中的屬性 return typeof val === 'function' ? val.call(this, state, getters) : state[val] }; }); // 返回 函數(shù)對象 return res });
2、應(yīng)用
仿照這種思想,可以對某個復(fù)雜對象中的字段的獲取方式進(jìn)行優(yōu)化。定義的工廠函數(shù)如下所示
export const mapTargetValue = (nameSpace, keyList = [])=>{ const result = {} // 注意:返回的方法不要使用箭頭函數(shù),否則拿不到 this // 這里 可以兼容兩種形式的 keyList ,參考 mapState 中屬性重命名的使用形式 if(Array.isArray(keyList)){ keyList.forEach( key => result[key] = function(){ // 這里假設(shè) 可以直接在 this 上 獲取得到 namespace對象 // 當(dāng)然 指定對象的獲取復(fù)雜程度取決于 你的代碼邏輯 return this[nameSpace][key] || 0 }) }else if(typeof keyList === 'object' && keyList){ for(let key in keyList){ result[keyList[key]] = function(){ return this[nameSpace][key] || 0} } } return result }
定義的該方法使用方式與 mapState
使用方式完全一致。與之前的取值方式相比,可大大縮減重復(fù)代碼量。具體應(yīng)用如下
computed: { ...mapTargetValue("targetObj", ["count1", "count2"]), ...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}), }
到此這篇關(guān)于vuex中mapState思想應(yīng)用的文章就介紹到這了,更多相關(guān)vuex mapState內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3中Element Plus Table(表格)點擊獲取對應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點擊獲取對應(yīng)id方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10Vue 3.0 前瞻Vue Function API新特性體驗
這篇文章主要介紹了Vue 3.0 前瞻Vue Function API新特性體驗,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08配置vite.confgi.ts無法使用require問題以及解決
這篇文章主要介紹了配置vite.confgi.ts無法使用require問題以及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05