Vue.js 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>

---

你可以从行动中回报承诺

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

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

---

您可能应该从您的行动中回报承诺：

/*
* 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(data => {
        toastr.success("Your profile has been updated");
      })
      .catch(error => {
        console.error(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")
    })
}