Question

我正在开发一个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.?
           }
        })
    }
}

因此，fetchUsers用户成功后，我需要调用delete操作。

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

请提供输入。

问候罗宾

Answer 1

您似乎缺少了Vuex的关键功能actions。如果您需要执行有关变异的异步操作，则应从一个操作中执行异步操作。在该操作中，您将可以执行其他操作，如this answer所示。

Answer 2

您可以像这样使用context对象的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) } }) }

order_by

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

Vuex：处理操作的最佳方法

2 个答案: