快捷導(dǎo)航

關(guān)于Vue的?Vuex的4個輔助函數(shù)

更新時間：2022年01月25日 10:42:23 作者：小綿楊Yancy

這篇文章主要介紹了關(guān)于Vue的?Vuex的4個輔助函數(shù),輔助函數(shù)的好處就是幫助我們簡化了獲取store中state、getter、mutation和action,下面我們一起來看看文章具體的舉例說明吧，需要的小伙伴也可以參考一下

一、輔助函數(shù)

當(dāng)一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵。

script中引入輔助函數(shù)：

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

二、實(shí)例

1、mapState 和 mapGetters

因?yàn)?code>state和getters返回的是屬性，也就是具體的值，所以mapState和mapGetters應(yīng)該放在計(jì)算屬性computed中。

例如：

現(xiàn)在store的state中有一個屬性userName:

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

computed中的代碼：

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

頁面中調(diào)用：

結(jié)果：

這樣就可通過簡單的...mapState(['userName'])來代替比較長的計(jì)算屬性函數(shù)了。
mapGetters和mapState用法一樣，在computed中調(diào)用即可，這里就只舉例mapState了。

2、mapMutations和mapActions

因?yàn)?code>mutations和actions返回的是函數(shù)，所以應(yīng)該放在組件的methods屬性中。

例如：

現(xiàn)在在store的mutations中由一tip函數(shù)，用于彈出歡迎當(dāng)前用戶彈窗：

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

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

組件中調(diào)用：在created函數(shù)中調(diào)用tip方法，實(shí)現(xiàn)歡迎彈窗。

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

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

到此這篇關(guān)于關(guān)于Vue的 Vuex的4個輔助函數(shù)的文章就介紹到這了,更多相關(guān)Vuex輔助函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！