1, mapState方法: 用于幫助我們映射state中的數(shù)據(jù)為計算屬性\
import {mapState,mapGetters} from 'vuex'
computed:{ //借助mapState生成計算屬性, 從state中讀取數(shù)據(jù)(對象寫法) // ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成計算屬性, 從state中讀取數(shù)據(jù)(數(shù)組寫法) ...mapState(['sum','school','subject']), //以上相當于下面的寫法 // sum(){ // return this.$store.state.sum // }, // school(){ // return this.$store.state.school // }, // subject(){ // return this.$store.state.subject // } },
2, mapGetters方法: 用于幫助我們映射getters中的數(shù)據(jù)為計算屬性
computed:{ //借助mapGetters生成計算屬性, 從getters中讀取數(shù)據(jù)(對象寫法) // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成計算屬性, 從getters中讀取數(shù)據(jù)(數(shù)組寫法) ...mapGetters(['bigSum']) //以上相當于下面的寫法 // ,bigSum(){ // return this.$store.getters.bigSum // } },
3, mapActions方法:用于幫助我們生成與actions對話的方法, 即:包含$store.dispatch(xxx)的函數(shù)
methods:{ //程序員自己寫 // increment(){ // this.$store.dispatch('increment',this.n) // //dispatch中的increment: 對應store.js中actions中的increment方法 // }, //借助mapActions生成對應的方法,方法中會調(diào)用dispatch去聯(lián)系actions(對象寫法) // ...mapActions({'increment':'increment'}) //借助mapActions生成對應的方法,方法中會調(diào)用dispatch去聯(lián)系actions(數(shù)組寫法) ...mapActions(['increment']) }
4, mapMutations方法: 用于幫助我們生成與muattions對話的方法, 即: 包含 $store.commit(xxx)的函數(shù)
methods:{ //程序員自己寫 // deincrement(){ // this.$store.commit('DEINCREMENT',this.n) // //commit中的increment: 對應store.js中mutations中的increment方法 // //如果不需要actions做什么(即不需要服務員做什么), 可以直接找后廚 // }, //借助mapMutations生成對應的方法,方法中會調(diào)用commit去聯(lián)系mutations(對象寫法) // ...mapMutations({'DEINCREMENT':'DEINCREMENT'}) //借助mapMutations生成對應的方法,方法中會調(diào)用commit去聯(lián)系mutations(數(shù)組寫法) ...mapMutations(['DEINCREMENT']), //注意,以上調(diào)用方法要傳值 }