vuex常用方法,vuex是怎么实现的
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辅助函数：computed: {
.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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。