vuex中的mapstate,vue mapstate
本文主要分享vuex中mapState的思想和应用。在需求开发过程中，一些接口返回的结果中有很多字段需要在页面上显示。通常，这些字段可以封装为。vue文件，或者可以将相应的字段重新赋给数据中的字段，以达到方便使用的目的。详细情况，我们看下面这篇文章。
目录
1，映射方法2，应用程序背景：
在需求开发过程中，一些接口返回的结果中有很多字段需要在页面上显示。通常，这些字段可以封装为。vue文件，或者为了方便起见，可以将相应的字段重新分配给数据中的字段。如下所示：
computed(){
count1(){
返回this.targetObj.count1
},
count2(){
返回this.targetObj.count2
},
//.
//想象一下。你必须写5到10次类似的代码。
}
但无论哪种方式，都会带来大量的代码冗余，让人极其不爽。为了解决这种现象，本文借鉴了vuex中使用map方法的思想，大大减少了冗余代码，可以对数据采集进行统一的容错处理。
1、map方法
vuex 中基本的 state 提取使用方法，可通过 以下方式：
computed(){
计数(){
归还这个。$store.count
}
}
同时，vuex也注意到了问题。当存储中有大量数据需要采集时，这种方法会产生很大的代码冗余，重复代码会无处不在。你会看到大量的计算属性的定义，以及长链接的对象属性的提取。所以vuex定义了一个map方法，用来批量获取存储中的指定数据。
这种映射方法实际上是一种工厂函数(高阶函数)，用来产生特定形式的函数。以下是源代码。如你所见，mapstate最终将返回一个对象RES。RES中的每个属性都是一个方法，这个方法返回state中的值。
var mapState=normalizeNamespace(函数(名称空间，状态){
//定义一个对象来存储获取指定属性的方法。
var RES={ }；
normalizeMap(州)。forEach(function (ref) {
var key=ref.key
var val=ref.val
//定义方法以获取指定对象中的指定属性。
res[key]=函数mappedState () {
var state=this。$ store.state
var getters=this。$ store.getters
//根据命名空间查找指定的存储模块对象
if(命名空间){
var module=getModuleByNamespace(this。$store， mapState ，命名空间)；
如果(！模块){
返回
}
状态=module . context . state；
getters=module . context . getters；
}
//获取通过指定命名空间获得的存储模块中的属性。
val===函数的返回类型
？val.call(this，state，getters)
:状态[val]
};
});
//返回函数对象
返回资源
});
2、应用
模仿这种想法，我们可以优化复杂对象中的场的采集方法。定义的工厂功能如下
export const mapTargetValue=(nameSpace，keyList=[])={
常量结果={}
//注意：不要在返回的方法中使用箭头函数，否则得不到这个
//这里可以兼容两种形式的keyList。参见mapState中属性重命名的用法表单。
if(Array.isArray(keyList)){
key list . foreach(key=result[key]=function(){
//假定可以直接在此上获取命名空间对象。
//当然，获取指定对象的复杂程度取决于你的代码逻辑。
返回此[命名空间][密钥] 0
})
} else if(type of key list=== object key list){
对于(在键列表中输入键){
result[key list[key]]=function(){ return this[nameSpace][key] 0 }
}
}
回送结果
}
由定义的方法的使用方式与mapState完全相同。与以前的方法相比，可以大大减少重码量。具体应用如下
计算值：{
.mapTargetValue(targetObj ，[count1 ， count2])，
.mapTargetValue(targetObj ，{ count1: count3 ，count2: count4})，
}
关于mapState思想在vuex中的应用的这篇文章就到这里了。有关vuex mapState的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。