我们之前学了vuex状态管理,组件可以引用state,但是不能直接修改state,比如发送操作到actions,在此执行异步操作,然后再提交mutation来修改state.如果没有异步操作可以直接提交到mutation跳过actions步骤。
在mutation这里devtools插件可以用来监控state状态改变记录。如果有异步操作不通过actions直接到mutations就会无法捕捉。
所以mutaions中的方法必须是同步方法,不能有异步操作
updateInfo(state) {
setTimeout(()=>{
state.info.name='v587'
},1000)
}
在之前的更新信息方法内写上定时器模拟异步操作
这就是在mutations里写异步操作的弊端。
增加不是替代,不要试图在action里直接操作state,那样就是替代了mutation的工作。我们只是为了将异步操作分离开来,放到此处单独处理。
所以getters和mutations的默认参数都是state,而actions参数确是context
组件发送请求给actions
updateInfo() {
//this.$store.commit('updateInfo')
this.$store.dispatch('aUpdateInfo')
}
当然也可以发送参数跟在函数名后,或者直接将dispatch参数写成对象形式。
和mutations提交规则是一样的。
updateInfo(count) { //this.$store.commit('updateInfo') this.$store.dispatch({ type:'aUpdateInfo', count }) }
actions: {
//默认参数context:上下文
aUpdateInfo(context,count){
setTimeout(()=>{
context.commit('updateInfo')
console.log(count.count)
},1000)
}
},
updateInfo(state) {
state.info.name='qcl'
}
我们异步操作,修改成功后,要告诉组件已经修改成功,然后组件进行下一步操作。当我们在actions里commit的时候如果没有报错,就可以认为提交成功。
我们此时可以直接在组件里调用actions方法时传入一个函数
updateInfo(count) {
//this.$store.commit('updateInfo')
this.$store.dispatch({
type:'aUpdateInfo',
count,
success:()=>console.log('完成异步操作')
})
}
actions: {
//默认参数context:上下文
aUpdateInfo(context,count){
setTimeout(()=>{
context.commit('updateInfo')
console.log(count.count)
count.success()
},1000)
}
},
如果异步操作成功后回调success函数即可。
记住如果dispatch和commit方法参数都是对象,那么接受的方法的参数也是对象。
那这样不又是之前的问题,异步操作代码和业务代码放到了一起,显得结构十分杂乱。
我们不是学过promise吗
aUpdateInfo(context,count){
new Promise(resolve => {
setTimeout(()=>{
context.commit('updateInfo')
resolve(count)
},1000)
}).then(res=>{
console.log(res.count)
res.success()
})
}
然后用promise将异步操作和回调分开
我写的还是不够优雅,既然回调函数是为了让组件知道,commit成功,自然要在外边执行回调函数
改进
aUpdateInfo(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('updateInfo')
console.log(payload)
resolve('成功')
}, 1000)
})
}
updateInfo(count) {
//this.$store.commit('updateInfo')
this.$store
.dispatch('aUpdateInfo', '我是携带信息')
.then(res=>console.log(res))
}
我们这次加上一个return来返回Promise,这样一旦updateInfo执行dispatch方法时,就会跳到aUpdateInfo方法,该方法又将Promise返回到updateInfo方法,此时将then接着dispatch方法后边就是将then接Promise后边。
这样实现了双向信息的传递,首先我们通过dispatch方法传入携带信息,我们在actions里既可以使用携带信息,同时如果要给外部信息,通过可以利用返回Promise方法,将给外界的信息放在resolve参数里,不用单独在组件方法里用参数接受,通过then方法接受使用。