Как выполнить код после завершения действия?

Question

[danilr]

Во vuex выполняется запрос, при ответе сервера мне нужно вызвать izitoaster (попап с инфой все ок или нет), как мне сообщили, из самого vuex его вызывать нельзя, поэтому надо как-то с помощью promise вызвать izitoast из метода компонента, где вызывается действие. Как это сделать?

Вот во vuex:

setEditNewGroup(context, formGroupData) {
      HTTP.post(Routes.saveGroupNewEdit, formGroupData)
        .then(({ data }) => {
          console.log(formGroupData)
          // if (!formGroupData.id){
            context.commit('getNewAddGroup', {
              data: data,
              formGroupData: formGroupData
            })
          // }
        })
        .catch(error => {
          // this.$toast.error('Ошибка загрузки данных. Попробуйте ещё раз')
          console.error(error);
        })
    }

Вот код в компоненте:

handleSaveGroup(){

      this.$store.dispatch('administration/setEditNewGroup', this.formGroupData)
    }

Comments

[Сергей delphinpro]

А назначить глобальные перехватчики (interceptors) в axios не вариант?
или у вас другая библиотека используется?

[danilr]

Сергей delphinpro, axois, но я не знаю как это делается) пока через промисы актионс мне нравится больше решение)

Answer 1

[0xD34F]

Читаем документацию внимательнее:

Первое, что нужно знать — store.dispatch может обрабатывать Promise, возвращаемый обработчиком действия, и также возвращает Promise

Возвращаете из своего действия промис - then - вызываете что там вам надо.

Comments

[danilr]

Спасибо

Answer 2

[Владимир]

0xD34F прав на все 100%.
А уж если разжёвывать, то в вашем случае это можно или так:

this.$store.dispatch('administration/setEditNewGroup', this.formGroupData).then(() => {
// Здесь вставить код, что всё ок
}).catch((error) => {
// Обработка ошибки
})

Или через асинки:

async handleSaveGroup(){
try {
      await this.$store.dispatch('administration/setEditNewGroup', this.formGroupData);
// Здесь вставить код, что всё ок
}
catch (error) {
// Обработка ошибки
}
    }

Comments

[danilr]

Спасибо за полный ответ, а то мыкался бы пока все правильно не написал бы) А можешь разжевать как запись во vuex будет выглядеть?)

[Владимир]

К примеру берем список ролей с API-сервера через axios. Я пишу так:

store.js

'use strict';

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        roles: []   // Тут будут храниться роли. Массив
    },
    mutations: {
        setRoles: (state, roles) => state.roles = roles   // Сеттер ролей (метод записи каких-либо данных в state.roles)
    },
    actions: {
        async fetchRoles({ commit }) {
            try {     // Пытаемся...
                const { data } = await api.get('api/roles');    // Получить массив ролей с сервера
                commit('setRoles', data);                  // И записать в state.roles
            }
            catch (error) {             // Если возникла ошибка
                throw error;           // "Выкинуть" ее в вышестояший метод
            }
        },
    }
});

Кусок из Roles.vue

<template>
    ...
</template>

<script>
export default {
    data: () => ({
        ...
    }),
    async created() {   // При созлании страницы...
        try {
            await this.$store.dispatch('fetchRoles'); // Получить список ролей с сервера
            // Теперь можно забирать роли из this.$store.state.roles
        }
        catch (error) {    // Вот он - вышестоящий обработчик ошибок
            alert(error.message);
        }
    }
}
</script>

[danilr]

Спасибо, а я думал надо обернуть в промис)
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}