亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vuex中...mapstate和...mapgetters的區(qū)別及說明

 更新時間：2022年08月31日 10:20:28   作者：番茄炒蛋多加米飯  
這篇文章主要介紹了vuex中...mapstate和...mapgetters的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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

…mapstate

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

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

官方文檔如上

因為state相當(dāng)于data，getters相當(dāng)于計算屬性，個人理解如果只需要拿到state中一個值，就沒必要在getters中作為計算屬性出現(xiàn)。

…mapGetters

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

如果你想將一個 getter 屬性另取一個名字，使用對象形式：

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

官方文檔如上

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

vuex mapState mapGetters用法及多個module下用法

在vuex，當(dāng)一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計算屬性會有些重復(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
? }
}

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

一、mapState

1、對象寫法

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

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

除此之外，還有更簡潔的寫法

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

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

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

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

3、使用展開運算符

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

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

自從有了展開運算符后，可以極大地簡化寫法

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

二、mapGetters

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

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

模塊化寫法

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

三、mapActions、mapMutations

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

例如：

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

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

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

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

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

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

相關(guān)文章

最新評論