咸鱼妹前端 2021-11-15

Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations

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方法

用于帮助我们映射getters中的数据为计算属性：

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

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

例子

不用`mapState`，`mapGetters`方法，原始写：

<template>
    <div>
	<h1>当前求和为：{{$store.state.sum}}</h1>
	<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
	<h3>我在{{$store.state.school}}，学习{{$store.state.subject}}</h3>	
    </div>
</template>

<script>
    export default {
	name:'Count',
    }
</script>

store/index.js：

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备state——用于存储数据
const state = {
    sum:1, //当前的和
    school:'尚硅谷',
    subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
   bigSum(state){
	return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    state,
    getters
})

用mapState,mapGetters方法写

count.vue

<template>
    <div>
	<h1>当前求和为：{{sum}}</h1>
	<h3>当前求和放大10倍为：{{bigSum}}</h3>
	<h3>我在{{school}}，学习{{subject}}</h3>	
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    export default {
	name:'Count',
	data() {
	    return {
		n:1, //用户选择的数字
            }
	},
	computed:{
            //借助mapState生成计算属性，从state中读取数据。（对象写法）
	    // ...mapState({sum:'sum',school:'school',subject:'subject'}),

	    //借助mapState生成计算属性，从state中读取数据。（数组写法）
	    ...mapState(['sum','school','subject']),

	    //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
	    // ...mapGetters({bigSum:'bigSum'})
			
	    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
	    ...mapGetters(['bigSum'])
	},	
   }
</script>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备state——用于存储数据
const state = {
    sum:1, //当前的和
    school:'尚硅谷',
    subject:'前端'
}
//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state){
	return state.sum*10
    }
}

//创建并暴露store
export default new Vuex.Store({
    state,
    getters
})

3. mapActions方法

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

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

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

4. mapMutations方法

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

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

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

例子：

不用mapMutations,mapActions

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    jiaOdd(context,value){
	console.log('actions中的jiaOdd被调用了')
	if(context.state.sum % 2){
	    context.commit('JIA',value)
	}
    },
    jiaWait(context,value){
	console.log('actions中的jiaWait被调用了')
	setTimeout(()=>{
	    context.commit('JIA',value)
	},500)
    }
}
//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state,value){
	console.log('mutations中的JIA被调用了')
	state.sum += value
    },
    JIAN(state,value){
	console.log('mutations中的JIAN被调用了')
	state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum:1, //当前的和
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
})

count.vue

<template>
    <div>
	<h1>当前求和为：{{$store.state.sum}}</h1>
	<select v-model.number="n">
	    <option value="1">1</option>
	    <option value="2">2</option>
	    <option value="3">3</option>
	</select>
	<button @click="increment">+</button>
	<button @click="decrement">-</button>
	<button @click="incrementOdd">当前求和为奇数再加</button>
	<button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
    export default {
	name:'Count',
	data() {
	    return {
		n:1, //用户选择的数字
	    }
	},
	methods: {
	    increment(){
		this.$store.commit('JIA',this.n)
	    },
	    decrement(){
		this.$store.commit('JIAN',this.n)
	    },
	    incrementOdd(){
		this.$store.dispatch('jiaOdd',this.n)
	    },
	    incrementWait(){
		this.$store.dispatch('jiaWait',this.n)
	    },
	},	
    }
</script>

<style lang="css">
    button{
	margin-left: 5px;
    }
</style>

用mapMutations,mapActions

<template>
    <div>
	<h1>当前求和为：{{$store.state.sum}}</h1>
	<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: {
	    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
	    ...mapMutations({increment:'JIA',decrement:'JIAN'}),

	    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
	    // ...mapMutations(['JIA','JIAN']),

	    /* ************************************************* */
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
	    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
           //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
	   // ...mapActions(['jiaOdd','jiaWait'])
	},
    }
</script>

<style lang="css">
    button{
	margin-left: 5px;
    }
</style>

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

总代码

count.vue

<template>
    <div>
        <h1>当前求和为：{{sum}}</h1>
        <h3>当前求和放大10倍为：{{bigSum}}</h3>
        <h3>我在{{school}}，学习{{subject}}</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, //用户选择的数字
            }
        },
        computed: {
            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            ...mapState(['sum', 'school', 'subject']),

            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters(['bigSum'])

        },
        methods: {

            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
            ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),

            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
            ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' })

        },
        mounted() {
            const x = mapState({ he: 'sum', xuexiao: 'school', xueke: 'subject' })
            console.log(x)
        },
    }
</script>

<style lang="css">
    button {
        margin-left: 5px;
    }
</style>

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {

    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了')
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了')
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500)
    }
}

//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了')
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了')
        state.sum -= value
    }
}

//准备state——用于存储数据
const state = {
    sum: 0, //当前的和
    school: '尚硅谷',
    subject: '前端'
}

//准备getters——用于将state中的数据进行加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

App.vue

<template>
    <div>
        <Count />
    </div>
</template>

<script>
    import Count from './components/Count'
    export default {
        name: 'App',
        components: { Count },

    }
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
    el: '#app',
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创，仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ：1642748312给予处理。
码云笔记 » Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations