1, mapState方法: 用于帮助我们映射state中的数据为计算属性\
import {mapState,mapGetters} from 'vuex'
computed:{ //借助mapState生成计算属性, 从state中读取数据(对象写法) // ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性, 从state中读取数据(数组写法) ...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中的数据为计算属性
computed:{ //借助mapGetters生成计算属性, 从getters中读取数据(对象写法) // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性, 从getters中读取数据(数组写法) ...mapGetters(['bigSum']) //以上相当于下面的写法 // ,bigSum(){ // return this.$store.getters.bigSum // } },
3, mapActions方法:用于帮助我们生成与actions对话的方法, 即:包含$store.dispatch(xxx)的函数
methods:{ //程序员自己写 // increment(){ // this.$store.dispatch('increment',this.n) // //dispatch中的increment: 对应store.js中actions中的increment方法 // }, //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法) // ...mapActions({'increment':'increment'}) //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法) ...mapActions(['increment']) }
4, mapMutations方法: 用于帮助我们生成与muattions对话的方法, 即: 包含 $store.commit(xxx)的函数
methods:{ //程序员自己写 // deincrement(){ // this.$store.commit('DEINCREMENT',this.n) // //commit中的increment: 对应store.js中mutations中的increment方法 // //如果不需要actions做什么(即不需要服务员做什么), 可以直接找后厨 // }, //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法) // ...mapMutations({'DEINCREMENT':'DEINCREMENT'}) //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法) ...mapMutations(['DEINCREMENT']), //注意,以上调用方法要传值 }