vuex中mapState思想應(yīng)用
背景:
在需求開(kāi)發(fā)過(guò)程中,有的接口返回的結(jié)果中有很多字段需要展示到頁(yè)面上。通常可以將這些字段在.vue文件中封裝為計(jì)算屬性,或者重新將對(duì)應(yīng)字段賦值到 data 中的字段來(lái)達(dá)到便于使用的目的。如下:
computed(){
count1(){
return this.targetObj.count1
},
count2(){
return this.targetObj.count2
},
// ...
// 想象一下。你要寫(xiě) 5 遍 或者 10 遍類(lèi)似的代碼
}
但是不管哪種方法,都會(huì)帶來(lái)大量的代碼冗余,極為難受。為解決這種現(xiàn)象,本文借用了使用了vuex 中 map 方法的思想,極大的縮減了冗余代碼,并且能夠?qū)?shù)據(jù)獲取做統(tǒng)一的容錯(cuò)處理。
1、map方法
vuex 中基本的 state 提取使用方法,可通過(guò) 以下方式:
computed(){
count(){
return this.$store.count
}
}
同時(shí) vuex 也同樣注意到了問(wèn)題,當(dāng) store 中要獲取的數(shù)據(jù)很多時(shí),這種方式將會(huì)產(chǎn)生極大的代碼冗余,重復(fù)代碼遍地走。你將會(huì)看到大量的計(jì)算屬性的定義,以及長(zhǎng)鏈路的對(duì)象屬性提取。因此vuex 定義了一種 map 方法,用來(lái)批量的獲取 store 中的指定數(shù)據(jù)。
這種 map 方法實(shí)際上就是一種 工廠函數(shù)(高階函數(shù)),用來(lái)生產(chǎn)特定形式的函數(shù)。以下是源碼,可以看到,mapState 其實(shí)最終會(huì)返回一個(gè)對(duì)象 res, res中的每個(gè)屬性都是一個(gè)方法,而這個(gè)方法返回 state 中的值。
var mapState = normalizeNamespace(function (namespace, states) {
// 定義一個(gè)對(duì)象 用于存儲(chǔ) 獲取指定屬性的方法
var res = {};
normalizeMap(states).forEach(function (ref) {
var key = ref.key;
var val = ref.val;
// 定義 獲取指定對(duì)象中指定屬性的方法
res[key] = function mappedState () {
var state = this.$store.state;
var getters = this.$store.getters;
// 根據(jù) namespace 查找指定的 store 模塊對(duì)象
if (namespace) {
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
if (!module) {
return
}
state = module.context.state;
getters = module.context.getters;
}
// 獲取通過(guò)指定 namespace 得到的 store module 中的屬性
return typeof val === 'function'
? val.call(this, state, getters)
: state[val]
};
});
// 返回 函數(shù)對(duì)象
return res
});
2、應(yīng)用
仿照這種思想,可以對(duì)某個(gè)復(fù)雜對(duì)象中的字段的獲取方式進(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對(duì)象
// 當(dāng)然 指定對(duì)象的獲取復(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決
這篇文章主要介紹了Electron中打包應(yīng)用程序及相關(guān)報(bào)錯(cuò)問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
vue頁(yè)面使用阿里oss上傳功能的實(shí)例(二)
本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例(二),主要介紹OSS管理控制臺(tái)設(shè)置訪問(wèn)權(quán)限、角色等,有興趣的可以了解一下2017-08-08
Vue+Element-ui日歷排班自定義實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue+Element-ui日歷排班自定義的相關(guān)資料,有現(xiàn)成的日歷插件但是不符合需求,所以項(xiàng)目中使用vue+element的表格組件自己實(shí)現(xiàn)一個(gè)日歷組件,需要的朋友可以參考下2023-09-09
Vue中使用matomo進(jìn)行訪問(wèn)流量統(tǒng)計(jì)的實(shí)現(xiàn)
這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問(wèn)流量統(tǒng)計(jì)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
@click.native和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了@click.native和@click的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue自定義樹(shù)狀結(jié)構(gòu)圖的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue自定義樹(shù)狀結(jié)構(gòu)圖的實(shí)現(xiàn)方法,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)拖拽滾動(dòng)效果插件
這篇文章主要介紹了Vue 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鼠標(biāo)拖拽滾動(dòng)效果插件,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12

