...mapstate和...mapgetters的區(qū)別

…mapstate

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問(wèn)題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，當(dāng)映射的計(jì)算屬性的名稱(chēng)與 state 的子節(jié)點(diǎn)名稱(chēng)相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。

computed: mapState([
? // 映射 this.count 為 store.state.count
? 'count'
])

官方文檔如上

因?yàn)閟tate相當(dāng)于data，getters相當(dāng)于計(jì)算屬性，個(gè)人理解如果只需要拿到state中一個(gè)值，就沒(méi)必要在getters中作為計(jì)算屬性出現(xiàn)。

…mapGetters

輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性

如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：

...mapGetters({
? // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount`
? doneCount: 'doneTodosCount'
})

官方文檔如上

相當(dāng)于計(jì)算屬性，等于把vuex中的計(jì)算屬性映射到了當(dāng)前組件中

vuex mapState mapGetters用法及多個(gè)module下用法

在vuex，當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余，例如

computed: {
? count() {
? ? return this.$store.state.count
? },
? name() {
? ? return this.$store.state.name
? },
? age() {
? ? return this.$store.getter.age
? },
? userInfo() {
? ? return this.$store.getter.userInfo
? }
}

為了解決這個(gè)問(wèn)題，我們可以使用 mapState和mapGetters 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵

一、mapState

1、對(duì)象寫(xiě)法

// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from 'vuex'
export default {
? computed: mapState({
??
? ? // 傳函數(shù)參數(shù)
? ? count: state => state.count, // 箭頭函數(shù)可使代碼更簡(jiǎn)練 映射為this.count
? ? userCount: state => state => state.user.count, // 模塊化寫(xiě)法 箭頭函數(shù)可使代碼更簡(jiǎn)練 映射為this.userCount
? ??
? ? // 傳字符串參數(shù)
? ? userName: 'name', // name等同于state => state.name，不支持模塊化寫(xiě)法 映射為this.userName
? ??
? ? // 需要使用this局部狀態(tài)，使用常規(guī)函數(shù)寫(xiě)法
? ? age(state) { // 映射為this.age
? ? ? return state.age + this.age // 可與局部狀態(tài)組合
? ? }
? })
}

2、字符串?dāng)?shù)組寫(xiě)法

除此之外，還有更簡(jiǎn)潔的寫(xiě)法

當(dāng)映射的計(jì)算屬性的名稱(chēng)與 state 的子節(jié)點(diǎn)名稱(chēng)相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組，類(lèi)似于對(duì)象的key和value鍵名相同時(shí){ name: name } =》{ name }

computed: mapState([
? 'count', // 映射 this.count 為 store.state.count
? 'name' // 映射 this.name為 store.state.name
])

此外如果是用到了module模塊化，除了將對(duì)象作為參數(shù)傳遞之外,namespaced mapState還可以使用兩個(gè)參數(shù)：namespace和表示模塊成員的對(duì)象名稱(chēng)數(shù)組，像這樣

computed: mapState('user', ['count', 'name']) // user 模塊名稱(chēng)

3、使用展開(kāi)運(yùn)算符

mapState 函數(shù)返回的是一個(gè)對(duì)象，這樣就造成無(wú)法與當(dāng)前局部組件計(jì)算屬性混合使用

以前我們需要使用一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)，以使我們可以將最終對(duì)象傳給 computed 屬性。

自從有了展開(kāi)運(yùn)算符后，可以極大地簡(jiǎn)化寫(xiě)法

computed: {
? ...mapState([
? ? 'count', // 映射 this.count 為 store.state.count
? ? 'name' // 映射 this.name為 store.state.name
? ]),
? // 局部組件計(jì)算屬性
? localComputed () {},
}

二、mapGetters

mapGetters輔助函數(shù)寫(xiě)法相同

computed: {
? ...mapGetters([
? ? 'count', // 映射 this.count 為 store.getters.count
? ? 'name' // 映射 this.name為 store.getters.name
? ]),
? // 局部組件計(jì)算屬性
? localComputed () {},
}

模塊化寫(xiě)法

...mapGetters('user', ['count', 'name']) // user 模塊名稱(chēng)

三、mapActions、mapMutations

mapActions、mapMutations用法相同，他們的作用都是把a(bǔ)ctions、mutations里的方法映射到局部組件調(diào)用

例如：

以前的調(diào)用actions：

this.$store.dispatch("test", "value")
this.$store.dispatch("user/test", "value") // user模塊化， 第二個(gè)參數(shù)為傳參

使用輔助函數(shù)后調(diào)用

...mapActions([
? ? "test",
])
this.test('value')

總結(jié)以上，推薦使用展開(kāi)運(yùn)算符+字符串?dāng)?shù)組傳參的方式使用，可以極大簡(jiǎn)化代碼，更優(yōu)雅，不冗余 

這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論