文章目錄
- 8.4四個map方法的使用
-
- 8.4.1講解生成代碼函數mapState和mapGetters
- 8.4.2講解生成代碼函數mapMutations與mapActions
- 本人其他相關文章連結
8.4四個map方法的使用
8.4.1講解生成代碼函數mapState和mapGetters
注意點1：
問題：mapState幹啥的？
答案：用來生成重複代碼的，比如return this.$store.state.xxxx這段就非常重複，無法複用。其中mapState采用{K:V}形式，K為計算屬性名或者方法名，V為屬性名
sum(){
return this.$store.state.sum
},
school(){
return this.$store.state.school
},
subject(){
return this.$store.state.subject
},
---------------------------------------------------------------------------------
等同于
mounted() {
const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
console.log(x)
}
列印結果：
注意點2：
問題：computed計算屬性如何添加mapState？
答案：不能把mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})直接放上去會報錯為啥？因為mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})傳回的是一個{}對象，如果想使用，請使用ES6的文法，文法：…mapState({})，其中…的作用是把mapState中的{}中的每一組展開放在computed計算屬性中
computed:{
...mapState({he:'sum',xuexiao:'school',xueke:'subject'})
}
8.4.2講解生成代碼函數mapMutations與mapActions
注意點1：
使用mapMutations與mapActions若需要傳遞參數，必須在綁定事件時就傳參
比如：調用加的函數increment，使用原方法功能沒問題，但是如果寫成簡寫形式就會報錯如圖，錯誤原因就是綁定事件不傳參，預設傳遞的時$event的觸發事件，因為原方法知道把傳參n傳遞過去，而簡寫方式并不知道傳啥過去，就會預設把$event對象傳遞過去。
<button @click="increment">+</button>
//原方法，需要傳遞參數n
increment(){
this.$store.commit('JIA',this.n)
}
//簡寫方法
...mapMutations({increment:'JIA',decrement:'JIAN'}),
解決方案：綁定事件時就傳參就行了
本人其他相關文章連結
1.《進階篇第8章：vuex》包括了解vuex、安裝vuex、搭建vuex環境、四個map方法的使用、子產品化+名命空間
2.vue2知識點：了解vuex、安裝vuex、搭建vuex環境
3.vue2知識點：vuex中四個map方法的使用
4.vue2知識點：子產品化+名命空間