7-5.Vuex之actions异步修改状态

Vuex中actions异步修改状态

actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。
actions是可以调用Mutations里的方法的。
例子：
在实现点击按钮进行数值相加或相减的功能时，利用异步方法进行操作。

• 在src/vuex/store.js文件中定义actions对象：

const actions={
	addActions(context){
		context.commit('add',10)//调用mutations中的方法
	},
	reduceActions({commit}){
		commit('reduce');
	}
}

注意：在actions对象中声明了addActions和reduceActions方法，利用commit调用mutations里面的add以及reduce方法。

• context：上下文对象
• {commit}：直接把commit对象传递过来

同时在store.js文件中将actions对象进行暴露

export default new Vuex.Store({
	state,mutations,getters,actions
})

在store.js文件中定义好actions对象后，在模版中对其进行操作。

• 在<script>标签中引入mapActions对象：

import {mapActions} from 'vuex';

• 增加两个按钮，实现数值相加或相减的功能

<template>
	<div>
		<h3>结果是:{{count}}</h3>
		<p>
			<button @click="$store.commit('add',1)">加1</button>
			<button @click="reduce">减1</button>
		</p>
		<p>
			<button @click="addActions">异步加1</button>
			<button @click="reduceActions">异步减1</button>
		</p>
	</div>
</template>

• 改造methods方法，首先还是利用ES6的扩展运算符把mapMutations和mapActions方法加入。

methods:{
	...mapMutations(['reduce','add']),
	...mapActions(['addActions','reduceActions'])
},

运行之后效果与使用mutations一样，看不出什么区别。想要检验是否是异步操作，可以修改addActions方法，增加一个计时器（setTimeOut）延迟执行数值减一(在实现数值相加的5秒后再执行数值减一的功能)，同时在控制台输我比reduce提前执行语句，观察语句是否在控制台先进行输出。

const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}
}

这里用到了ES6的箭头函数，运行程序后，可以发现是先在控制台上打印我比reduce提前执行语句，然后才执行数值减一，可以体现异步的效果。

附加：
store.js文件的代码：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state={
	count:1
}
const mutations={
	add(state,n){
		state.count+=n;
		console.log("运行了add方法")
	},
	reduce(state){
		state.count--;
		console.log("运行了reduce方法")
	}
}
const getters={
	count:function(state){
		return state.count+=100
	}
}
const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}
}
export default new Vuex.Store({
	state,mutations,getters,actions
})

count.vue文件中的代码：

<template>
	<div>
		<h3>结果是:{{count}}</h3>
		<p>
			<button @click="$store.commit('add',1)">加1</button>
			<button @click="reduce">减1</button>
		</p>
		<p>
			<button @click="addActions">异步加1</button>
			<button @click="reduceActions">异步减1</button>
		</p>
	</div>
</template>
<script>
	import store from '@/vuex/store';
	import {mapState,mapMutations} from 'vuex';
	import {mapGetters} from 'vuex';
	import {mapActions} from 'vuex';

	export default {
		data() {
			return {
				msg: '结果是:'
			}
		},
		computed:{
			...mapMutations(['count']),
			count(){
   		       return this.$store.getters.count;
   		    }
			//...mapGetters(['count'])
		},
		methods:{
			...mapMutations(['reduce','add']),
			...mapActions(['addActions','reduceActions'])
		},
		//computed:mapState({
		//	count:state=>state.count
		//}),
		//computed:mapState(['count']),
		store
	}
</script>
<style>
</style>

来源：CSDN

作者：落叶~

链接：https://blog.csdn.net/weixin_43913219/article/details/104270107