Vue的基本用法很好用,但是有很多优化的写法你不一定知道。下面这篇文章主要介绍程序员应该知道的关于vuex冷门技巧的相关信息,有需要的朋友可以参考一下。
目录
当访问嵌套过深的数据项时,优化访问它的方式。如何使用mapState的步骤和原理?如果vuex中的数据和这个组件中的数据同名,该怎么办?使用全局状态,如果是子模块呢?如何在模块中使用状态?摘要
当访问某个数据项嵌套太深了,优化一下访问的方式
我相信每个程序员都会用vuex。首先我承认vuex真的超级好用,尤其是项目非常大的时候,代码看起来会非常简洁,易于维护。但是项目大了,vuex的公开数据嵌套会越来越深。在组件中使用时,会像下图这样。我得一直点啊点,才能得到最里面的数据。项目大了,时间就长了。
在我不断的尝试中,成功发现vuex其实有一个辅助功能图可以解决这个问题。在这里,我把我总结的语法分享给大家~希望能帮到你。
辅助功能图:简化状态、获取器、变量和动作的使用。
mapState的使用步骤
//1.导入辅助函数mapState,这是vuex中定义的工具函数。
//es6 import根据需要从“vuex”导入{mapState}。
从“vuex”导入{ mapState }
计算值:{
//描述1:对象是扩展对象并将其合并到computed。
//描述2: MapState是一个函数
//['数据项1 ','数据项2']
.mapState(['xxx']),
.mapState({ '新名称':' xxx'})
}
使用
脚本:this.xxx
模板:{{xxx}}
插图:
原理
Map是辅助函数,将vuex中的数据投射到组件中;计算值:{.mapState()}该.这里是对象的扩展算子,是对象作为一个整体的合并。
如果vuex中的数据与本组件内的数据名相同,怎么办呢?
辅助函数mapState对数据重命名
.mapState({ '新名称':' xxx'})
## Vuex-map函数用法汇总
使用全局state
直接用:这个。$ store . state . XXX;地图辅助功能:
计算值:{
//省略其他计算属性
.mapState(['xxx']),
.mapState({ '新名称':' xxx'})
}
那如果是分模块化呢?如何使用modules中的state?
图示
直接用:这个。$store.state模块名. XXX;地图辅助功能:
计算值:{
.mapState('模块名',['xxx']),
.mapState('模块名称',{ '新名称':' xxx'})
}
使用全局getters
直接用:这个。$store.getters.xxxmap辅助函数:
计算值:{
.mapGetters(['xxx']),
.mapGetters({ '新名称':' xxx'})
}
使用modules中的getters
直接用:这个。$ store . getters . module name . xxxmap辅助函数:
计算值:{
.mapGetters('模块名',['xxx']),
.mapGetters('模块名称',{ '新名称':' xxx'})
}
使用全局mutations
用途:这个。$store.commit('变异名',参数)直接映射辅助函数:
方法:{
.mapMutations(['突变名称']),
.mapMutations({ '新名称':'突变名称' })
}
使用modules中的mutations(namespaced:true)
用途:这个。$store.commit('模块名/变异名',参数)直接映射辅助函数:
方法:{
.mapMutations('模块名',['xxx']),
.mapMutations('模块名称',{ '新名称':' xxx'})
}
使用全局actions
用途:这个。$store.dispatch('动作名称',参数)直接映射辅助函数:
方法:{
.mapActions(['actions name']),
.mapActions({ '新名称':'操作名称' })
}
使用modules中的actions(namespaced:true)
用这个。$store.dispatch('模块名/动作名',参数)直接映射辅助函数:
方法:{
.mapActions('模块名',['xxx']),
.mapActions('模块名称',{ '新名称':' xxx'})
}
如果namespace为true,则需要补充模块名。如果namespace为false,则不需要补充模块名称。
总结
这篇关于vuex冷门小技巧的文章到此为止。更多关于vuex冷门技巧的信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。