Vuex ：提交action的时候如何设置回调方法

Vuex action 回调函数使用教程

最新推荐文章于 2025-03-14 09:11:12 发布

原创最新推荐文章于 2025-03-14 09:11:12 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vuex #action设置回调 #vue #store #cb

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vuex的action中如何设置回调函数，以便在后台删除操作成功后更新数据。当在vue页面调用action时，由于参数限制，需将回调函数和所需参数封装到一个对象中一起传递。错误的做法是直接分开传递，而正确方法是将它们整合到一个数据对象里传给action。

问题描述：在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: '删除成功！'
       })
     }
   })
}