腳本之家服務(wù)器常用軟件

快捷導航

vuex中的四個map方法的使用小結(jié)

更新時間：2023年05月31日 11:27:30 作者：小花皮豬

vuex里面有四個map方法，他們分別可以針對不同的元素進行不同的代碼生成，本文就來詳細的介紹一下vuex中的四個map方法，具有一定的參考價值，感興趣的可以了解一下

1 編寫案例

現(xiàn)在想要展示一段文本，其中里面兩個參數(shù)要存在store的state里面，那么每次獲取都要通過這么一大串代碼獲取，及其復雜且不美觀，vue的風格指南就說過插值語法不要寫的這么復雜

2 計算屬性簡化

當然我們可以可以通過計算屬性簡化，但是計算屬性只支持在當前組件使用

但是可以觀察發(fā)現(xiàn)，其實都是讀取的store.state.x里面的數(shù)據(jù)，代碼都是一樣的，所以是否有辦法生成或者封裝這些冗余的代碼呢？

vuex的設(shè)計者當然也考慮到了這個問題，下面我們就去使用生成相關(guān)代碼的函數(shù)

3 mapState簡化

想要使用生成相關(guān)代碼的函數(shù)，需要先引入vuex，從vuex身上引入mapState

// 引入vuex身上的mapState
import {mapState} from 'vuex'

mapState是一個對象，里面有很多組key，value，它有兩種寫法

寫法1(對象寫法)

  // 借助mapState生成計算屬性,從state中讀取數(shù)據(jù)(對象寫法)
  ...mapState({sum:'sum',address:'address',info:'info'}),

寫法2(數(shù)組寫法)

除了對象寫法，還有更為精簡的數(shù)組寫法

注意，此時一定不能直接寫成對象簡寫形式，應該放到一個數(shù)組里面再進行簡寫形式

每一個key都有兩個用途，一個用途是生成的計算屬性名稱，另外一個是從state里面讀取的屬性名稱

// 借助mapState生成計算屬性,從state中讀取數(shù)據(jù)(數(shù)組寫法)
    ...mapState(['sum','address','info']),

4 mapGetters簡化

mapGetters和mapState的寫法是一樣的，首先需要從vuex里面引用出來

寫法也是分為對象和數(shù)組寫法，和mapState如出一轍

寫法1(對象寫法)

// 借助mapGetters生成計算屬性,從getters中讀取數(shù)據(jù)(對象寫法)
...mapGetters({bigSum:'bigSum'}),

寫法2(數(shù)組寫法)

// 借助mapGetters生成計算屬性,從getters中讀取數(shù)據(jù)(數(shù)組寫法)
 ...mapGetters(['bigSum']),

到此mapState和mapState對于計算屬性的優(yōu)化就結(jié)束了,下面是mapActions和mapMutations優(yōu)化methods

注意觀察，這些代碼也都是很相似的，我們也是可以進行優(yōu)化的

5 mapMutations

首先也是引入vuex中的mapMutations

寫法1(對象寫法)

 // 借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(對象寫法)
 ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'})

這時候發(fā)現(xiàn)問題

這時候我們需要給事件綁定參數(shù)

這樣就解決了

寫法2(數(shù)組寫法)

// 借助mapMutations生成對應的方法，方法中會調(diào)用commit去聯(lián)系mutations(數(shù)組寫法)
 ...mapMutations(['INCREMENT','DECREMENT']),

6 mapActions

首先還是引入vuex中的 mapActions

// 引入vuex身上的mapState和mapGetters和mapMutations和mapActions
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

寫法1(對象寫法)

 // 借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(對象寫法)
 ...mapActions({incrementOdd:'incrementOdd',incrementOdd:'incrementOdd'}),

寫法2(數(shù)組寫法)

// 借助mapActions生成對應的方法，方法中會調(diào)用dispatch去聯(lián)系actions(數(shù)組寫法)
...mapActions(['incrementOdd','incrementWait']),

7 總結(jié)

1 mapState方法： 用于幫助我們映射state中的數(shù)據(jù)為計算屬性

computed: {
    //借助mapState生成計算屬性：sum、school、subject（對象寫法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成計算屬性：sum、school、subject（數(shù)組寫法）
    ...mapState(['sum','school','subject']),
},

2 mapGetters方法： 用于幫助我們映射getters中的數(shù)據(jù)為計算屬性

computed: {
    //借助mapGetters生成計算屬性：bigSum（對象寫法）
    ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成計算屬性：bigSum（數(shù)組寫法）
    ...mapGetters(['bigSum'])
},

3 mapActions方法： 用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數(shù)

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（對象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4 mapMutations方法： 用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數(shù)

methods:{
    //靠mapActions生成：increment、decrement（對象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    //靠mapMutations生成：JIA、JIAN（對象形式）
    ...mapMutations(['JIA','JIAN']),
}

備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

到此這篇關(guān)于vuex中的四個map方法的使用小結(jié)的文章就介紹到這了,更多相關(guān)vuex map使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: