vuex中mapState思想应用
作者:彭博 发布时间:2023-07-02 16:33:55
标签:vuex,mapState
背景:
在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的。如下:
computed(){
count1(){
return this.targetObj.count1
},
count2(){
return this.targetObj.count2
},
// ...
// 想象一下。你要写 5 遍 或者 10 遍类似的代码
}
但是不管哪种方法,都会带来大量的代码冗余,极为难受。为解决这种现象,本文借用了使用了vuex
中 map
方法的思想,极大的缩减了冗余代码,并且能够对数据获取做统一的容错处理。
1、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
});
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
}
定义的该方法使用方式与 mapState
使用方式完全一致。与之前的取值方式相比,可大大缩减重复代码量。具体应用如下
computed: {
...mapTargetValue("targetObj", ["count1", "count2"]),
...mapTargetValue("targetObj", { count1: "count3", count2: "count4"}),
}
来源:https://segmentfault.com/a/1190000040784287
0
投稿
猜你喜欢
- 本文实例分析了Python多线程操作数据库相关问题。分享给大家供大家参考,具体如下:python多线程并发操作数据库,会存在链接数据库超时、
- 如何优雅地解析命令行选项随着我们编程经验的增长,对命令行的熟悉程度日渐加深,想来很多人会渐渐地体会到使用命令行带来的高效率。自然而然地,我们
- 本文实例讲述了Python实现获取nginx服务器ip及流量统计信息功能。分享给大家供大家参考,具体如下:#!/usr/bin/python
- 1. 一个简单的字典我们先从写一个简单的字典示例开始,顺便看一下 python 字典的语法。student ={'姓名':&
- 大概来介绍一下 Django Allauth 改造的期间遇到的一些问题和改造方法,在此之前我只想说——Django Allauth 是屑。为
- 方法一、SELECT SUM(正确数)+SUM(错误数) AS 总记录数,SUM(正确数),SUM(错误数) FROM ( SELECT C
- 简介Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Dja
- 0x 00 返回值简介回顾下,上一节简单介绍了函数及其各种参数,其中也有简单介绍 print 和 return 的区别,print 仅仅是打
- 我们可用一个函数来实现小数转分数,不过只能转换能够整除的分数:Public Function XtoF(str
- pandas.read_sql 可以在数据库中执行指定的SQL语句查询或对指定的整张表进行查询,以DataFrame 的类型返回查询结果,这
- 本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下:运行效果截图如下:具体代码如下:<html
- scrapy是目前python使用的最广泛的爬虫框架架构图如下解释:Scrapy Engine(引擎): 负责Spider、ItemPipe
- 目录建表查看数据库文件:插入查询删除补充:Mysql自动按月表分区MySQL单表数据量,建议不要超过2000W行,否则会对性能有较大影响。最
- 如何制作一个股票滚屏显示面板?<html> <head> <script
- 利用卷积神经网络训练图像数据分为以下几个步骤1.读取图片文件2.产生用于训练的批次3.定义训练的模型(包括初始化参数,卷积、池化层等参数、网
- 看代码: HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
- <html> <head> <meta charset="utf-8"/> <
- HTML转PDF:1.页面底层实现——Vue:最低兼容ie102.实现思路:1> 使用html2canvas.js将网页转换为图片2&
- 在Windows下使用VSCode编译运行,都出现中文乱码的问题,今天我就遇见了这种情况,上网搜了半天也没有找到正确的解决方法,现将我把我的
- Pandas如何将带有字符串元素的列拆分为多个列。使用以下字符串的方法。str.split():用定界符分割str.extract():按正