快捷導(dǎo)航

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

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

vuex里面有四個(gè)map方法，他們分別可以針對(duì)不同的元素進(jìn)行不同的代碼生成，本文就來(lái)詳細(xì)的介紹一下vuex中的四個(gè)map方法，具有一定的參考價(jià)值，感興趣的可以了解一下

1 編寫案例

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

2 計(jì)算屬性簡(jiǎn)化

當(dāng)然我們可以可以通過(guò)計(jì)算屬性簡(jiǎn)化，但是計(jì)算屬性只支持在當(dāng)前組件使用

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

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

3 mapState簡(jiǎn)化

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

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

mapState是一個(gè)對(duì)象，里面有很多組key，value，它有兩種寫法

寫法1(對(duì)象寫法)

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

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

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

注意，此時(shí)一定不能直接寫成對(duì)象簡(jiǎn)寫形式，應(yīng)該放到一個(gè)數(shù)組里面再進(jìn)行簡(jiǎn)寫形式

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

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

4 mapGetters簡(jiǎn)化

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

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

寫法1(對(duì)象寫法)

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

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

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

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

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

5 mapMutations

首先也是引入vuex中的mapMutations

寫法1(對(duì)象寫法)

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

這時(shí)候發(fā)現(xiàn)問(wèn)題

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

這樣就解決了

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

// 借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(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(對(duì)象寫法)

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

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

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

7 總結(jié)

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: