天天看點

vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

文章目錄

  • 8.4四個map方法的使用
    • 8.4.1講解生成代碼函數mapState和mapGetters
    • 8.4.2講解生成代碼函數mapMutations與mapActions
  • 本人其他相關文章連結

8.4四個map方法的使用

8.4.1講解生成代碼函數mapState和mapGetters

vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結
vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

注意點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)
}
           
列印結果:
vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

注意點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

vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結
vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

注意點1:

使用mapMutations與mapActions若需要傳遞參數,必須在綁定事件時就傳參

比如:調用加的函數increment,使用原方法功能沒問題,但是如果寫成簡寫形式就會報錯如圖,錯誤原因就是綁定事件不傳參,預設傳遞的時$event的觸發事件,因為原方法知道把傳參n傳遞過去,而簡寫方式并不知道傳啥過去,就會預設把$event對象傳遞過去。

<button @click="increment">+</button>

//原方法,需要傳遞參數n
increment(){
      this.$store.commit('JIA',this.n)
}

//簡寫方法
...mapMutations({increment:'JIA',decrement:'JIAN'}),
           
vue2知識點:vuex中四個map方法的使用,包括:mapState、mapGetters、mapMutations、mapActions8.4四個map方法的使用本人其他相關文章連結

解決方案:綁定事件時就傳參就行了

本人其他相關文章連結

1.《進階篇第8章:vuex》包括了解vuex、安裝vuex、搭建vuex環境、四個map方法的使用、子產品化+名命空間

2.vue2知識點:了解vuex、安裝vuex、搭建vuex環境

3.vue2知識點:vuex中四個map方法的使用

4.vue2知識點:子產品化+名命空間