Vuex-actions的使用
一、Action的基本定义我们知道,不能在mutations中进行异步操作。但是某些情况我们希望在vuex中进行一些异步操作,比如网络请求,必然是异步的,那这个时候就需要用actions了。action类似于mutation,但是是用来代替mutation进行异步操作的。二、action的使用可以传递参数也可以不传递参数actions:{//context:上下文,可以看成是store(默认参数)
·
一、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); //可以在里面完成一些操作
})
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)