[vue] 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>

<style lang="css">

</style>

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>

<style lang="css">

</style>

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模块化和命名空间