关于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组件基础的相关知识点以及代码实例，有需要的朋友可以学习参考下。2018-05-05
这篇文章主要为大家详细介绍了vue实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue通过axios发送ajax请求基础演示,包括了axios发送简单get请求，axios get传参，axios发送post请求等基础代码演示需要的朋友可以参考下2023-02-02
@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式
最近在升级vue/cli的具有了一些问题,解决问题的过程也花费了些时间,所以下面这篇文章主要给大家介绍了关于@vue/cli4升级@vue/cli5 node.js polyfills错误的解决方式,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue的hover/click事件如何动态改变颜色和背景色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue+axios 拦截器实现统一token的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧2022-12-12
Vue3新增了Composition API，我们只需将实现某一功能的相关代码全部放进一个函数中，然后return需要对外暴露的对象，这篇文章主要介绍了vue3 Composition API使用,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了Vue自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue教程之toast弹框全局调用示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论