咸鱼妹前端开发 2021-11-15

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

文章目录隐藏

1. mapState 方法
2. mapGetters 方法

例子

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

3. mapActions 方法
4. mapMutations 方法

例子：

不用 mapMutations,mapActions
用 mapMutations,mapActions

总代码

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抓紧创作！

微信

支付宝

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations