咸鱼妹前端 2021-11-15

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

AI 概述

1. mapState 方法2. mapGetters 方法例子不用mapState，mapGetters方法，原始写：用 mapState,mapGetters 方法写3. mapActions 方法4. mapMutations 方法例子：不用 mapMutations,mapActions用 mapMutations,mapActions总代码 1. mapState 方法用于帮助我们映射 state 中的数据为计算属性： computed:...

文章目录隐藏

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
    }
})

以上关于Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

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

微信

支付宝

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

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations