Vuex-actions的使用

一、Action的基本定义

• 我们知道，不能在mutations中进行异步操作。
• 但是某些情况我们希望在vuex中进行一些异步操作，比如网络请求，必然是异步的，那这个时候就需要用actions了。
• action类似于mutation，但是是用来代替mutation进行异步操作的。

二、action的使用

可以传递参数也可以不传递参数

actions:{
    
    
    //context:上下文，可以看成是store(默认参数)
    aUpdateInfo(context,payload){
    
    
        setTimeout(()=>{
    
    
            context.commit('updateInfo')
            consolo.log(payload);//参数
        },1000)
    }
        
}

在需要使用的组件中（app.vue）

<template>
	<button @click='updateInfo'>修改信息</button>
</template>
<script>
    export default{
        name:'app',
        data(){
            
        },
        methods:{
            updateInfo(){
                this.$store.dispatch('aUpdateInfo','我是参数payload')
            }
        }
    }
</script>

三、在action中使用promis

aUpdateInfo(context,payload){
    
    
    return new Promise((resolve,reject)=>{
    
    ...})
}

在组件中使用：

methods:{
	updateInfo(){
		this.$store.dispatch('aUpdateInfo','我是携带的信息').then(res=>{
	consolo.log('里面完成了提交');
	consolo.log(res); //可以在里面完成一些操作
})
}
}