关于Vue的 Vuex的4个辅助函数
一、辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
script中引入辅助函数：
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
二、实例
1、mapState 和 mapGetters
因为state和getters返回的是属性，也就是具体的值，所以mapState和mapGetters应该放在计算属性computed中。
例如：
现在store的state中有一个属性userName:
在Home.vue组件中通过mapState获取并显示在界面上：
computed中的代码：
computed:{
//通过辅助函数获取store中的state
...mapState(['userName'])
//等价于：下面常规计算属性代码
/* userName (){
return this.$store.state.userName
}*/
}
页面中调用：
结果：
这样就可通过简单的...mapState(['userName'])来代替比较长的计算属性函数了。mapGetters和mapState用法一样，在computed中调用即可，这里就只举例mapState了。
2、mapMutations和mapActions
因为mutations和actions返回的是函数，所以应该放在组件的methods属性中。
例如：
现在在store的mutations中由一tip函数，用于弹出欢迎当前用户弹窗：
上图中methods中的代码：简写了获取store中的mutation。
methods:{
//简写获取store中的mutations
...mapMutations(['tip'])
//等价于
/* tip(){
this.$store.commit('tip');
}*/
}
组件中调用：在created函数中调用tip方法，实现欢迎弹窗。
mapActions和mapMutations的用一样，既在nethods中声明即可，简化了引用store中的action和mutaion。
从上面的例子可以看到，辅助函数的好处就是帮助我们简化了获取store中state、getter、mutation和action。当然，不使用辅助函数一样可以实现上述功能，但是当一个组件中需要同时使用多个state时，辅助函数就会变得比较方便。
到此这篇关于关于Vue的 Vuex的4个辅助函数的文章就介绍到这了,更多相关Vuex辅助函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue 动态组件用于实现在指定位置上，动态加载不同的组件，这篇文章主要介绍了Vue动态组件 component :is的使用,需要的朋友可以参考下2023-09-09
前端在el-dialog中嵌套多个el-dialog代码实现
最近使用vue+elementUI做项目,使用过程中很多地方会用到dialog这个组件,有好几个地方用到了dialog的嵌套,下面这篇文章主要给大家介绍了关于前端在el-dialog中嵌套多个el-dialog代码实现的相关资料,需要的朋友可以参考下2024-01-01
Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧2021-05-05
在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
在vue中最常用的应该就是axios了，这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述，提前安装一下也不用我说了吧2021-06-06
这篇文章主要介绍了vue select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
element-ui中el-cascader动态加载和默认值详解
vue+elementUI项目中el-cascader级联选择器使用频率非常高,下面这篇文章主要给大家介绍了关于element-ui中el-cascader动态加载和默认值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue单页面如何设置高度100%全屏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章2022-09-09
这篇文章主要为大家详细介绍了VueJs与ReactJS和AngularJS的异同点,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论