背景:
在需要开发过程中,有的接口返回的后果中有 很多字段 须要展现到页面上。通常能够将这些字段在.vue 文件中封装为 计算属性,或者从新将对应字段赋值到 data 中的字段来达到便于应用的目标。如下:
computed(){count1(){return this.targetObj.count1},
count2(){return this.targetObj.count2},
// ...
// 设想一下。你要写 5 遍 或者 10 遍相似的代码
}
然而不论哪种办法,都会带来 大量的代码冗余 ,极为好受。为解决这种景象,本文借用了应用了 vuex 中 map 办法的思维,极大的 缩减了冗余代码 ,并且可能对数据获取做 对立的容错解决。
map 办法:
vuex 中根本的 state 提取应用办法,可通过 以下形式:
computed(){count(){return this.$store.count}
}
同时 vuex 也同样留神到了问题,当 store 中要获取的数据很多时,这种形式将会产生极大的代码 冗余 ,反复代码遍地走。你将会看到 大量的计算属性的定义,以及长链路的对象属性 提取。因而 vuex 定义了一种 map 办法,用来批量的获取 store 中的指定数据。
这种 map 办法实际上就是一种 工厂函数(高阶函数),用来生产特定模式的函数。以下是源码,能够看到,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;
// 依据 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]
};
});
// 返回 函数对象
return res
});
利用:
仿照这种思维,能够对某个简单对象中的字段的获取形式进行优化。定义的工厂函数如下所示
export const mapTargetValue = (nameSpace, keyList = [])=>{const result = {}
// 留神:返回的办法不要应用箭头函数,否则拿不到 this
// 这里 能够兼容两种模式的 keyList,参考 mapState 中属性重命名的应用模式
if(Array.isArray(keyList)){keyList.forEach( key => result[key] = function(){
// 这里假如 能够间接在 this 上 获取失去 namespace 对象
// 当然 指定对象的获取复杂程度取决于 你的代码逻辑
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 应用形式完全一致。与之前的取值形式相比,可大大缩减反复代码量。具体利用如下
computed: {...mapTargetValue("targetObj", ["count1", "count2"]),
...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),
}