Vue笔记十二：Vuex辅助函数

mapState辅助函数

作用：处理state中的函数
使用有两步：
1.引入mapstate函数
2.在计算属性中使用辅助函数

<template>
	<h1>mapstate辅助函数：{{num}}</h1>
</template>
<script>
	// 1.引入mapstate函数
	import {mapState} from 'vuex'
	export default{
		name:"mapState",
		data(){
			return{};
		},
		// 2.在计算属性中使用辅助函数
		computed:{
			...mapState(['num'])
		}
		
	}
</script>

使用对比：
使用之前：<h1>{{$store.state.num}}</h1>
使用之后：<h1>{{num}}</h1>

mapGetters辅助函数

作用：处理getters属性中的数据，使用方法和mapState一样，都是在computed

<template>
<div>
	<h1>mapstate辅助函数：{{num}}</h1>
	<h1>mapGetters辅助函数：{{newnum}}</h1>
</div>
</template>
<script>
	// 1.引入mapstate函数
	import {mapState,mapGetters} from 'vuex'
	export default{
		name:"mapState",
		data(){
			return{};
		},
		// 2.在计算属性中使用辅助函数
		computed:{
			...mapState(['num']),
			...mapGetters(['newnum'])
		}
		
	}
</script>

mapMutations辅助函数

作用：作用是把store中Mutations内的方法映射到组件methods属性中，可以在组件中直接使用Mutations中的方法。

<template>
<div>
	<input type="text" :value="$store.state.num" />
	<!-- 3.绑定单击事件 -->
<input type="button" @click="addnum" value="+1"/>
</div>
</template>
<script>
	// 1.引入mapstate函数
	import {mapMutations} from 'vuex'
	export default{
		name:"mapMutations",
		data(){
			return{};
		},
		methods:{
			// 2.在methods中使用mapMutations
			...mapMutations(['getAdd']),
			addnum(){
				// 4.直接使用mapMutations结构的方法
				this.getAdd()
			}
		}
		
	}
</script>

mapActions辅助函数

作用：作用是把store中actions内的方法映射到组件methods属性中，可以在组件中直接使用actions中的方法。

<template>
<div>
	<input type="text" :value="$store.state.num" />
	<!-- 3.绑定单击事件 -->
<input type="button" @click="addnum" value="+1"/>
</div>
</template>
<script>
	// 1.引入mapstate函数
	import {mapMutations,mapActions} from 'vuex'
	export default{
		name:"mapMutations",
		data(){
			return{};
		},
		methods:{
			// 2.在methods中使用mapMutations
			...mapMutations(['getAdd']),
			...mapActions(['getAddActions']),
			addnum(){
				// 4.直接使用mapMutations结构的方法
				this.getAddActions()
			}
		}
		
	}
</script>