耀极客论坛

 找回密码
 立即注册
查看: 732|回复: 0

关于Vue的 Vuex的4个辅助函数

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:16:48 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了关于Vue的 Vuex的4个辅助函数,辅助函数的好处就是帮助我们简化了获取store中state、getter、mutation和action,下面我们一起来看看文章具体的举例说明吧,需要的小伙伴也可以参考一下

一、辅助函数
  当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。
  script中引入辅助函数:
  1. import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
复制代码
二、实例

1、mapState 和 mapGetters
  因为state和getters返回的是属性,也就是具体的值,所以mapState和mapGetters应该放在计算属性computed中。
  例如:
  现在store的state中有一个属性userName:

  在Home.vue组件中通过mapState获取并显示在界面上:

  computed中的代码:
  1.   computed:{
  2.     //通过辅助函数获取store中的state
  3.     ...mapState(['userName'])
  4.     //等价于:下面常规计算属性代码
  5. /*    userName (){
  6.       return this.$store.state.userName
  7.     }*/
  8.   }
复制代码
  页面中调用:

  结果:

  这样就可通过简单的...mapState(['userName'])来代替比较长的计算属性函数了。
mapGetters和mapState用法一样,在computed中调用即可,这里就只举例mapState了。

2、mapMutations和mapActions
  因为mutations和actions返回的是函数,所以应该放在组件的methods属性中。
  例如:
  现在在store的mutations中由一tip函数,用于弹出欢迎当前用户弹窗:

  上图中methods中的代码:简写了获取store中的mutation。
  1.   methods:{
  2.     //简写获取store中的mutations
  3.     ...mapMutations(['tip'])
  4.     //等价于
  5. /*    tip(){
  6.       this.$store.commit('tip');
  7.     }*/
  8.   }
复制代码
  组件中调用:在created函数中调用tip方法,实现欢迎弹窗。

  mapActions和mapMutations的用一样,既在nethods中声明即可,简化了引用store中的action和mutaion。
  从上面的例子可以看到,辅助函数的好处就是帮助我们简化了获取store中state、getter、mutation和action。当然,不使用辅助函数一样可以实现上述功能,但是当一个组件中需要同时使用多个state时,辅助函数就会变得比较方便。
  到此这篇关于关于Vue的 Vuex的4个辅助函数的文章就介绍到这了,更多相关Vuex辅助函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:38 , Processed in 0.076208 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表