当前位置：首页 > news >正文

Vue 四个map的使用方法

news 2025/7/28 8:56:45

1.mapState方法：用于帮助我们映射state中的数据为计算属性。

computed:{
                        //借助mapState生成计算属性：sum、school、subject（对象写法）
                        ...mapState({sum:'sum',school:'school',subject:'subject'}),
                        //借助mapState生成计算属性：sum、school、subject（数组写法）
                        ...mapState(['sum','school','subject']),
                }

2. mapGetters方法：用于帮助我们映射state中的数据为计算属性。

                computed:{
                        //借助mapGetters生成计算属性：bigSum（对象写法）
                        ...mapGetters({bigSum:'bigSum'}),
                        //借助mapGetters生成计算属性：bigSum（数组写法）
                        ...mapGetters(['bigSum'])
                }

3. mapActions 方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。

                methods: {
                        //靠mapActions生成：incrementOdd、incrementWait（对象形式）
                        ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),

                        //靠mapActions生成：incrementOdd、incrementWait（数组形式）
                        ...mapActions(['incrementOdd','incrementWait']),
                },

4. mapMutations 方法：用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数。

                methods: {
                        //靠mapMutations生成：increment、decrement（对象形式）
                        ...mapMutations({INCREMENT:'INCREMENT',DECREMENT:'DECREMENT'}),

                        //靠mapMutations生成：increment、decrement（数组形式）
                        ...mapMutations(['INCREMENT','DECREMENT']),
                },

/*    Count.vue    */
<template><div class="main"><h1>这门课是{{ school }}的{{ subject }}课程</h1><h2>当前求和为：{{ sum }}</h2><h3>当前求和放大十倍为：{{ bigSum }}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="INCREMENT(n)">+</button><button @click="DECREMENT(n)">-</button><button @click="incrementOdd(n)">当前为奇数再加</button><button @click="incrementWait(n)">等会再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1}},methods: {// increment(){//     //只需要执行state中sum的加法功能，逻辑简单可以不写dispatch//     this.$store.commit('INCREMENT',this.n)// },// decrement(){//     //只需要执行state中sum的减法功能，逻辑简单可以不写dispatch//     this.$store.commit('DECREMENT',this.n)// },//靠mapMutations生成：increment、decrement（对象形式）// ...mapMutations({INCREMENT:'INCREMENT',DECREMENT:'DECREMENT'}),//靠mapMutations生成：increment、decrement（数组形式）...mapMutations(['INCREMENT','DECREMENT']),/* **************************************************************** */// incrementOdd(){//     this.$store.dispatch('incrementOdd',this.n)// },// incrementWait(){//     this.$store.dispatch('incrementWait',this.n)// },//靠mapActions生成：incrementOdd、incrementWait（对象形式）// ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),//靠mapActions生成：incrementOdd、incrementWait（数组形式）...mapActions(['incrementOdd','incrementWait']),},computed:{//借助mapState生成计算属性：sum、school、subject（对象写法）// ...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性：sum、school、subject（数组写法）...mapState(['sum','school','subject']),/* **************************************************************** *///借助mapGetters生成计算属性：bigSum（对象写法）// ...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法）...mapGetters(['bigSum'])}}
</script><style lang="less" scoped>button{margin-left: 5px;}
</style>

查看全文

http://www.dtcms.com/a/301294.html