Vuex：处理动作的最佳方式答案

【问题标题】：Vuex: Best Way To Handle actionsVuex：处理动作的最佳方式
【发布时间】：2019-10-04 22:51:16
【问题描述】：

我正在开发一个 CRUD 应用程序来显示 user-list。作为管理员，用户列表显示有edit 和delete 图标。一旦通过调度deleteUser 操作删除了用户，user-list 应该被重新获取以反映更新的用户列表。

actions: {
    fetchUsers(context) {
        axios.get("/get/user").then(function(response) {
            context.commit("SET_USERS", response.data);
        });
    },
    deleteUser(context,payload) {
         axios.delete("/delete/user",).then(function(response) {
           if(response.status == 200) {
               //Refresh the user list.
               //HOW TO call "fetchUsers" from here.?
           }
        })
    }
}

所以我需要在delete 用户成功后调用fetchUsers 操作。

实现这一目标的最佳方法是什么？复制代码会有所帮助，但这违反了 DRY 原则。 Delete 是一个示例，但可能有多个操作，例如 edit，需要再次调用 fetchUsers。

请提供意见。

问候罗宾。

【问题讨论】：

变异是同步的，所以首先你必须把这些方法移到actions
@dziraf ：我为我的错误问题道歉。是的，这一切都属于行动。那么是否可以重用另一个动作的动作？

标签： vue.js vuex

【解决方案1】：

您似乎遗漏了 Vuex 的一个关键特性 actions。如果您需要执行有关突变的异步操作，则应从操作中执行异步操作。在该操作中，您将能够执行其他操作，如 this answer 所示。

【讨论】：

非常抱歉各位，我的错误，我在提及问题时是错误的。这是我需要反复调用的操作。

【解决方案2】：

你可以像这样使用context对象的dispatch()

deleteUser(context,payload) {
     axios.delete("/delete/user",).then(function(response) {
       if(response.status == 200) {
           // payload is optional and used if you want to send specific datas to your fetchUsers method
           context.dispatch('fetchUsers', payload)
       }
    })
}

cf：https://vuex.vuejs.org/api/#commit 和 https://vuex.vuejs.org/api/#actions

【讨论】：