Vuex: лучший способ справиться с действиями

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 action после delete успешный пользователь.

Каков наилучший способ достичь этого? Копирование кода поможет, но это противоречит принципу СУХОЙ. Delete является примером, но может быть несколько действий, таких как edit, для которых потребуется снова вызвать fetchUsers.

Пожалуйста, предоставьте информацию.

С уважением Робин.

Answer 1

Похоже, вам не хватает критической функции Vuex - actions . Если вам нужно выполнить асинхронную операцию, связанную с мутацией, асинхронные операции должны выполняться из действия. В рамках действия вы сможете выполнять другие действия, как показывает этот ответ .

Answer 2

Вы можете использовать dispatch() объекта 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)
       }
    })
}

ср: https://vuex.vuejs.org/api/#commit и https://vuex.vuejs.org/api/#actions