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

学妹手机里的美照

前言

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

进入正文…

---

一、mapGetters 方法

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

代码语言：javascript复制

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

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

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

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

代码语言：javascript复制

//第一步得先引入
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 或者是下面这种计算属性的方式，但是仍要我们自己写。

代码语言：javascript复制

  computed:{
    sum(){
      return this.$store.state.sum
    }
  },

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

代码语言：javascript复制

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

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

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