「后端小伙伴来学前端了」Vuex进阶操作,让你的代码更加高效(简称如何学会偷懒 【手动狗头】)


【对话专家,HMS Core 6创新能力解读】11月25日19:00 直播报名>>>

在这里插入图片描述 学妹手机里的美照

前言

前一篇写了Vuex基本使用,用起来还稍稍有些繁琐,代码有很多 冗余的地方,这篇就带着大家用更简单的方式来使用Vuex(其实就是怎么更好的偷懒,用更少的代码来完之前的事情)

进入正文....


一、mapGetters 方法

在我们之前要取出store中的getters,在组件中是需要$store.getters.bigSum 才能取到,为了方便会写成计算属性

bigSum(){
    return this.$store.getters.bigSum
}

一个两个还能接受,但是如果有很多的,代码会显得十分冗余。不太合适,作为一名合格的程序员,偷懒是必备的哈。

我们能想到的,前辈们都已经考虑到了。所以就有了mapGetter辅助函数。

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

//第一步得先引入
import {mapGetters} from 'vuex'

// 第二步 写在计算属性中
computed:{
    // 之前的写法
    // bigSum(){
    //   return this.$store.getters.bigSum
    // }
  
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    // ...mapGetters(['bigSum']),
},

实现效果都是一样的。

如果有多个值需要映射的话, ...mapGetters({bigSum:'bigSum'},{xxxx:'xxxxx'}), 或者...mapGetters(['bigSum','xxxx'])都是可以的,极大的压缩了代码。

二、mapState方法

之前要从store 中取得 state 的话,有下面两种方式

  1. $store.state.sum 或者是下面这种计算属性的方式,但是仍要我们自己写。
  computed:{
    sum(){
      return this.$store.state.sum
    }
  },

自动生成方法,和上面的那个mapGetter 是一样的

// 引入的时候多引入一个 mapState  
import {mapGetters,mapState} from 'vuex'

// 计算属性
computed:{
    // sum(){
    //   return this.$store.state.sum
    // }
    //借助mapState生成计算属性:sum(对象写法)
    ...mapState({sum:"sum"}),
   //借助mapState生成计算属性:sum(数组写法)
    ...mapState(['sum']),
},

即使是多个也会非常方便,自动生成是真的香(


码神部落- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与码神部落立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者撒浪嘿呦码神部落享有帖子相关版权。
3、码神部落管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者撒浪嘿呦码神部落的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。

最新回复 (0)
    • 码神部落
      2
        立即登录 立即注册 GitHub登录
返回
发新帖
作者最近主题: