前言:上一章我們將倉庫拆分成了四個文件闯捎,這一章我們講下
mapState
、mapActions
這兩個輔助函數(shù)叙谨。
GitHub:https://github.com/Ewall1106/mall
1温鸽、關(guān)于輔助函數(shù)
(1)首先我們需要明確一點(diǎn)的就是,像mapState
這些都是輔助函數(shù)手负,只不過是一種簡寫方法涤垫,讓你少按幾次鍵而已。以mapState輔助函數(shù)
為例:
當(dāng)一個組件需要獲取多個狀態(tài)時候虫溜,將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。為了解決這個問題股缸,我們可以使用
mapState
輔助函數(shù)幫助我們生成計(jì)算屬性衡楞,讓你少按幾次鍵。
(2)注意事項(xiàng)
-
mapMutations
放到methods下敦姻; -
mapActions
放到methods下瘾境; -
mapGetters
則放到computed下。
2镰惦、mapState
(1)讓我們進(jìn)入test.vue
文件中迷守,我們以前獲取vuex
中state
的city
數(shù)據(jù)直接使用的是:
this.$store.state.city
但是,如果要引用state
中的很多數(shù)據(jù)怎么辦旺入?
(2)這時候兑凿,就是mapState
這個輔助函數(shù)派上用場了凯力,可以幫我們簡化操作。
- 首先當(dāng)然得從
vuex
中引入mapState
礼华; - 然后我們在
computed
計(jì)算屬性中使用這個輔助函數(shù)咐鹤。
mapState輔助函數(shù)
3、mapActions
(1)mapState
輔助函數(shù)是獲取vuex
中state
對象的值圣絮,而mapActions
對應(yīng)的是哪個操作呢祈惶?——就是把dispatch
方法分發(fā)action
這個操作簡化。(這里不懂的可以看前章:vuex初探(二))
(2)所以扮匠,讓我們進(jìn)入到testCity.vue
頁面:
- 引入
mapActions
- 在
methods
中注冊這個方法 - 使用
mapState輔助函數(shù)
4捧请、小結(jié)
- 這章講了
vuex
中的兩個輔助函數(shù),其實(shí)沒什么難的棒搜,其本質(zhì)不過就是簡化代碼而已疹蛉。 - 下章我們講
mapMutations
和mapGetters
這兩個輔助函數(shù),雖然本質(zhì)都是一樣同為簡化操作帮非,但是使用的過程中與本章講的兩個還是有些許不同氧吐。