VueJS - VueX : 비동기 프로세스 후 알림 표시

VueJS - VueX : 비동기 프로세스 후 알림 표시

단일 파일 구성 요소 추출:

<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.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);
    });

  }

실행에서 약속을 반환할 수 있습니다.

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)
      })
}

당신은 아마도 당신의 행동으로부터 약속을 돌려주어야 할 것입니다.

/*
* 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")
    })
}

언급URL : https://stackoverflow.com/questions/55025078/vuejs-vuex-displaying-notification-after-async-process