目錄

• 一、輔助函式
• 二、例項
• 1、mapState 和 mapGetters
  
• 2、mapMutations和mapActions
  

一、輔助函式

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

script中引入輔助函式：

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

二、例項

1、mapState 和 mapGetters

因為state和getters返回的是屬性，也就是具體的值，所以mapState

例如：

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

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

computed中的程式碼：

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

頁面中呼叫：

結果：

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

2、mapMutations和mapActions

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

例如：

現在在stoaDMNore的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中s客棧tate、getter、mutation和action。當然，不使用輔助函式一樣可以實現上述功能，但是當一個元件中需要同時使用http://www.cppcns.com多個state時，輔助函式就會變得比較方便。

到此這篇關於關於Vue的 Vuex的4個輔助函式的文章就介紹到這了,更多相關Vuex輔助函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！