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"}), }
到此这篇关于vuex中mapState思想应用的文章就介绍到这了,更多相关vuex mapState内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
- 这篇文章主要分享vuex中mapState思想及应用,在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的,具体内容,我们一起来看下面文章内容吧...2021-10-09
- 这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-12
- 这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 这篇文章主要为大家介绍了Vuex的属性和作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-27
- 这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-09
vuex 多模块时 模块内部的mutation和action的调用方式
这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-25- 在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下...2021-07-13
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
这篇文章主要介绍了vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-01- 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,为了解决这个问题,Vue 提供 vuex,这篇文章主要给大家介绍了关于vuex项目中登录状态管理的相关资料,需要的朋友可以参考下...2021-09-23
- 这篇文章主要介绍了Vuex及其使用方法,感兴趣的同学,可以参考下...2021-04-25
- 这篇文章主要介绍了深入理解Vuex的作用,对Vuex感兴趣的同学,可以参考下...2021-05-12
- 在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下...2022-07-08
- 这篇文章主要为大家介绍了vue运用之vuex持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-23
- 这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-12-02
- 这篇文章主要为大家介绍了vuex Mutations同步Actions异步原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-12-12
- 这篇文章主要介绍了vuex store 缓存存储原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-07-27
- 最近参与了公司一个新的B端项目的研发,从无到有搭建项目的过程中,遇到了关于项目鉴权的问题,这篇文章主要给大家介绍了关于如何使用Vuex实现Vue后台管理中的角色鉴权的相关资料,需要的朋友可以参考下...2022-05-27