關於Vue的 Vuex的4個輔助函數

Posted on by

一、輔助函數

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

script中引入輔助函數：

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

二、實例

1、mapState 和 mapGetters

因為state和getters返回的是屬性，也就是具體的值，所以mapState和mapGetters應該放在計算屬性computed中。

例如：

現在store的state中有一個屬性userName:

在這裡插入圖片描述

在Home.vue組件中通過mapState獲取並顯示在界面上：

在這裡插入圖片描述

computed中的代碼：

  computed:{
    //通過輔助函數獲取store中的state
    ...mapState(['userName'])
    //等價於：下面常規計算屬性代碼
/*    userName (){
      return this.$store.state.userName
    }*/
  }

頁面中調用：

在這裡插入圖片描述

結果：

在這裡插入圖片描述

這樣就可通過簡單的...mapState(['userName'])來代替比較長的計算屬性函數瞭。
mapGetters和mapState用法一樣，在computed中調用即可，這裡就隻舉例mapState瞭。

2、mapMutations和mapActions

因為mutations和actions返回的是函數，所以應該放在組件的methods屬性中。

例如：

現在在store的mutations中由一tip函數，用於彈出歡迎當前用戶彈窗：

在這裡插入圖片描述

希望在Home.vue組件調用該方法，能夠在組件中彈窗。

在這裡插入圖片描述

上圖中methods中的代碼：簡寫瞭獲取store中的mutation。

  methods:{
    //簡寫獲取store中的mutations
    ...mapMutations(['tip'])
    //等價於
/*    tip(){
      this.$store.commit('tip');
    }*/
  }

組件中調用：在created函數中調用tip方法，實現歡迎彈窗。

在這裡插入圖片描述

效果：

在這裡插入圖片描述

mapActions和mapMutations的用一樣，既在nethods中聲明即可，簡化瞭引用store中的action和mutaion。

從上面的例子可以看到，輔助函數的好處就是幫助我們簡化瞭獲取store中state、getter、mutation和action。當然，不使用輔助函數一樣可以實現上述功能，但是當一個組件中需要同時使用多個state時，輔助函數就會變得比較方便。

到此這篇關於關於Vue的 Vuex的4個輔助函數的文章就介紹到這瞭,更多相關Vuex輔助函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：