VueJS - VueX: отображение уведомления после асинхронного процесса

Question

Извлечение моего отдельного файлового компонента:

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    data () {
        return {
            firstname: this.$store.getters.user.firstName,
            lastname: this.$store.getters.user.lastName,
        }
    },
    methods: {
        ...mapActions([
            'updateUserProfile'
        ]),
        // Function called when user click on the "Save changes" btn
        onSubmit () {
            console.log('Component(Profile)::onSaveChanges() - called');
            const userData = {
                firstName: this.firstname,
                lastName: this.lastname
            }
            this.updateUserProfile(userData);
        }
    }
}
</script>

В моем магазине VueX:

Я уже управляю состоянием ЗАГРУЗКИ, которое используется для отображения счетчика загрузки.

Теперь я хотел бы отобразить виджет уведомлений программно с помощью библиотеки toastr: toastr.success("Your profile has been updated");

Где мне разместить этот код?Я полагаю, что не рекомендуется помещать этот код непосредственно в функцию updateUserProfile магазина, а больше в компонент «Один файл», где выполняется вызов?

/*
   * Action used to fetch user data from backend
   */
  updateUserProfile ({commit, state}, userData) {

    if (!state.jwtToken) {
      return
    }

    // Inform VueX that we are currently loading something. Loading spinner will be displayed.
    commit('SET_IS_LOADING', true);

    axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {

      console.log('PUT /user/profile', res);

      // Store user data in local storage
      localStorage.setItem('user', JSON.stringify(res.data.data));

      // Set user Data in VueX Auth store
      commit('SET_USER_DATA', {
        user: res.data.data
      });

      // Reset is Loading
      commit('SET_IS_LOADING', false);

    })
    .catch(error => {
      // Reset isLoading
      commit('SET_IS_LOADING', false);
    });

  }

Answer 1

Вы можете вернуть Обещание с акции

updateUserProfile ({commit, state}, userData) {

  if (!state.jwtToken) {
    return
  }

  // Inform VueX that we are currently loading something. Loading spinner will be displayed.
  commit('SET_IS_LOADING', true);

  return axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {

    console.log('PUT /user/profile', res);

    // Store user data in local storage
    localStorage.setItem('user', JSON.stringify(res.data.data));

    // Set user Data in VueX Auth store
    commit('SET_USER_DATA', {
      user: res.data.data
    });

    // Reset is Loading
    commit('SET_IS_LOADING', false);
    return res.data.data
  })
  .catch(error => {
    // Reset isLoading
    commit('SET_IS_LOADING', false);
    throw error
  });
}

и затем в компоненте Vue:

  onSubmit () {
    console.log('Component(Profile)::onSaveChanges() - called');
    const userData = {
        firstName: this.firstname,
        lastName: this.lastname
    }
    this.updateUserProfile(userData)
      .then(data => {
        toastr.success("Your profile has been updated");
      })
      .catch(error => {
        console.error(error)
      })
}

Answer 2

Вы, вероятно, должны вернуть обещание из ваших действий:

/*
* Action used to fetch user data from backend
*/
updateUserProfile ({commit, state}, userData) {

    if (!state.jwtToken) {
      throw new Error('unauthenticated')
    }

    // Inform VueX that we are currently loading something. Loading spinner will be displayed.
    commit('SET_IS_LOADING', true);

    return axiosBackend.put('/user/profile', userData, { headers: { Authorization: state.authString } } ).then(res => {

      console.log('PUT /user/profile', res);

      // Store user data in local storage
      localStorage.setItem('user', JSON.stringify(res.data.data));

      // Set user Data in VueX Auth store
      commit('SET_USER_DATA', {
        user: res.data.data
      });

      // Reset is Loading
      commit('SET_IS_LOADING', false);

      return res.data.data
    })
    .catch(error => {
      // Reset isLoading
      commit('SET_IS_LOADING', false);
      throw error
    });
}

А затем используйте это обещание в вашем компоненте:

onSubmit () {
    console.log('Component(Profile)::onSaveChanges() - called');
    const userData = {
        firstName: this.firstname,
        lastName: this.lastname
    }
    this.updateUserProfile(userData).then(user => {
        toastr.success("Your profile has been updated")
    }).catch(error => {
        toastr.error("Something bad happened")
    })
}