问题描述: 在action中有
deleteTargetObject( {commit, state } , data)
方法可以执行删除数据操作,需要后台返回删除成功的结果之后再更新数据。
解决办法: 这个时候就需要传递一个回调函数给
deleteTargetObject( {commit, state } , data)
,在接收到后台返回的数据response
之后,把response,data
作为参数传递给回调函数,然后执行回调函数。
注意:在vue页面中调用action的
deleteTargetObject( {commit, state } , data)
的时候,参数只能传递一个(无论加了几个,在update中监听只获取到了第一个参数,所以把回调和需要的参数封装到一个data对象中再传递)。
刚开始不知道,把参数和回调分别作为参数传递给deleteTargetObject()
,但是一直没有执行回调函数,试调的时候才发现cb
一直是undefined
,于是想到把参数和回调函数封装到一个数据对象中传递给deleteTargetObject()
错误做法:
// store
deleteTargetObject({ commit, state }, targetObjectId , cb) {
deleteTargetObject(targetObjectId).then(response => {
if (response.status === '200') {
if (cb !== null) {
setTimeout(() => cb(response.data), 100)
}
// 提交删除
commit('deleteCurrentTargetObject', targetObjectId)
}
})
}
// index.vue
// 删除事件
deleteObject: function() {
this.deleteTargetObject(this.targetObjectId, result => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
}
修改之后:
// store
...
deleteTargetObject({ commit, state }, data) {
const targetObjectId = data.targetObjectId
const cb = data.cb
deleteTargetObject(targetObjectId).then(response => {
if (response.status === '200') {
if (cb !== null) {
setTimeout(() => cb(response.data), 100)
}
// 提交删除
commit('deleteCurrentTargetObject', targetObjectId)
}
})
},
// index.vue
// 删除事件
...
deleteObject: function() {
this.deleteTargetObject({
targetObjectId: this.targetObjectId,
cb: result => {
this.$message({
type: 'success',
message: '删除成功!'
})
}
})
}