在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、辅助函数当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 script中引入辅助函数: import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 二、实例1、mapState 和 mapGetters因为 例如: 现在store的state中有一个属性userName: 在Home.vue组件中通过mapState获取并显示在界面上: computed中的代码: computed:{ //通过辅助函数获取store中的state ...mapState(['userName']) //等价于:下面常规计算属性代码 /* userName (){ return this.$store.state.userName }*/ } 页面中调用: 结果: 这样就可通过简单的 2、mapMutations和mapActions因为 例如: 现在在 上图中 methods:{ //简写获取store中的mutations ...mapMutations(['tip']) //等价于 /* tip(){ this.$store.commit('tip'); }*/ } 组件中调用:在
从上面的例子可以看到,辅助函数的好处就是帮助我们简化了获取store中state、getter、mutation和action。当然,不使用辅助函数一样可以实现上述功能,但是当一个组件中需要同时使用多个state时,辅助函数就会变得比较方便。 到此这篇关于关于Vue的 Vuex的4个辅助函数的文章就介绍到这了,更多相关Vuex辅助函数内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界! |
请发表评论