1.Vue的輔助函式

mapState、mapGetters、mapActions、mapMutations

2.mapState 輔助函式

mapState是什麼？官方的解釋是:

當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵

當初在看到這個解釋的時候可能覺得非常空洞，難以理解。生成計算屬性是什麼？少按幾次鍵？？？

mapState是state的語法糖,什麼是語法糖?我對語法糖的理解就是,我明明已經對一種操作很熟練了,並且這種操作也不存在什麼問題,為什麼要用所謂的"更好,更好的操作"？,用了一段時間後,真香!

3.如何使用

在使用mapState之前,要匯入這個輔助函式。

import { mapState } from 'vuex'

使用方式

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
    <div>{{sex}}</div>
    <
 
div>{{from}}</div>
    <div>{{myCmpted}}</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      str: '國籍',
      dataCount: this.$store.state.count
    }
  },
  computed: mapState({
    count: 'count', // 第一種寫法
 

    sex: (state) => state.sex, // 第二種寫法
    from: function (state) { // 用普通函式this指向vue例項,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的寫法看起來和上面相同,事實上箭頭函式的this指標並沒有指向vue例項,因此不要濫用箭頭函式
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 這裡不需要state,測試一下computed的原有用法
      return '測試' + this.str
    }
  }),
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

computed可以接收mapState函式的返回值,你可以用程式碼中的三種方式去接收store中的值,具體可以看註釋。
如果我在後面想使用mapState怎麼辦？其實很簡單

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState輔助函式之後
 
computed:mapState({
    //先複製貼上
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再維護vuex
    count:'count'
    })

4.物件展開運算子

…mapState並不是mapState的擴充套件,而是…物件展開符的擴充套件 。

//之前的computed
computed:{
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ........
}
//引入mapState輔助函式之後
 
computed:{
    //原來的繼續保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再維護vuex
    ...mapState({  //這裡的...不是省略號了,是物件擴充套件符
        count:'count'
    })

mapState、mapGetters、mapActions、mapMutations的使用方法大同小異。。。