vuex是怎么实现的,vuex的基本使用

vuex是怎么实现的,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辅助函数:

计算值:{

.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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: