客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
背景： 在需求开发过程中，有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性，或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的。如下：
computed(){
count1(){
return this.targetObj.count1
},
count2(){
return this.targetObj.count2
},
// ...
// 想象一下。你要写 5 遍 或者 10 遍类似的代码
}
但是不管哪种方法，都会带来大量的代码冗余，极为难受。为解决这种现象，本文借用了使用了 1、map方法vuex 中基本的 state 提取使用方法，可通过 以下方式：
computed(){
count(){
return this.$store.count
}
}
同时
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
});
2、应用仿照这种思想，可以对某个复杂对象中的字段的获取方式进行优化。定义的工厂函数如下所示
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
}
定义的该方法使用方式与
computed: {
...mapTargetValue("targetObj", ["count1", "count2"]),
...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),
}
到此这篇关于vuex中mapState思想应用的文章就介绍到这了,更多相关vuex mapState内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论