在Vuex mutations中,我们有时会进行异步操作(向后端发送请求)。
action中方法的第一个参数context 相当于$store
现在使用setTimeout()模仿异步操作
state: {
info: {
name: 'c',
age: '21'
}
}
mutations: {
update(state){
etTimeout( () => {
state.info.name = 'a'
},1000)
}
}
调用update方法一秒钟后name改为a。在视图上确实看到了name的变化,但是打开devtools发现并没能成功跟踪到name的变化。因为vuex中的异步操作需要在actions中进行。
mutations: {
update(state,payload){
state.info.name = payload
}
}
actions: {
Aupdate(context,payload){
setTimeout( () => {
context.commit('update',payload)
},1000)
}
}
methods: {
update(){
this.$store.dispatch('Aupdate','aaa')
}
}
通过dispatch方法调用action中的Aupdate方法,进行异步操作,异步操作就是commit调用mutation中的update方法,aaa从update传到Aupdate,再传到mutatuion的update。
action同样支持特殊提交
this.$store.dispatch({
type: "Bupdate",
stu,
: "aaa",
})
使用Promise对异步操作完成做一个通知
Bupdate(context,payload){
return new Promise((resolve,reject) => {
setTimeout( () => {
context.commit('addStu',payload)
resolve()
},2000)
})
}
update() {
/*
actions的Bupdate返回一个Promise相当于在这里是
Promise().then()
*/
this.$store
.dispatch({
type: "Bupdate",
stu,
a: "aaa",
})
.then((res) => {
console.log(res);
alert("Over");
});
},