一、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); //可以在里面完成一些操作
})
}
}
Logo

前往低代码交流专区

更多推荐