VueX / VueJs: выполнение кода в компоненте после асинхронного процесса - PullRequest
Новая
       16

VueX / VueJs: выполнение кода в компоненте после асинхронного процесса

0 голосов
/ 14 марта 2019

Я пытаюсь отобразить тост, когда асинхронный запрос завершен.Я реализовал этот процесс:

  1. Компонент с одним файлом вызывает действия updateUserProfile () в моем хранилище VueX*
  2. При успешном выполнении я использую мутацию для обновления профиля пользователя в своем магазине и хочу показать тост из моего отдельного файлового компонента.

Проблема в том, что объект ответа всегдане определено в моем компоненте.Где моя ошибка?

Ошибка:

profile.vue? A62a: 328 Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'data' из неопределенногов eval (profile.vue? a62a: 328)

Магазин: 

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

  // 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);

    // 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;

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

}

Компонент: 

methods: {
    // mix the getters into computed with object spread operator
    ...mapActions([
        'updateUserProfile'
    ]),
    // Function called when user click on the "Save changes" btn
    onSubmit () {
        console.log('Component(Profile)::onSaveChanges() - called');
        const userData = {
            firstName: this.firstname,
        }
        this.updateUserProfile(userData).then( (response) => {
            console.log('COMPONENT', response);
            if (response.data.status === 200) {
                toastr.success("Your profile has been successfully updated.");
            }
        });
    }
}

1 Ответ

0 голосов
/ 14 марта 2019

Ну,

Было бы лучше, если бы вы вызвали toast из самого хранилища Vuex, как указано ниже. 

callAddToCart: ({ commit }, payload) => {
    axiosBackend.put('/user/profile', userData, { headers: { Authorization: 
       state.authString }}).then(response => {
       commit("setLoading", false, { root: true });
       payload.cartKey = response.key;
       commit("setNotification", {
           type: 'success',
           title: `title`,
       });
       commit("ADD_TO_CART", payload);
   });
},

и внутри мутации у вас может быть общее уведомление toast, и вы можете передать тип, сообщение и заголовок, как показано ниже. 

setNotification(state, {type, message, title}) {
    state.flash = { 
       type,
       title, 
       message
    }
}

ПРИМЕЧАНИЕ. Не забудьте загрузить элемент toast на корневом уровне для отображения в пользовательском интерфейсе.

Здесь работает Пример

Надеюсь, это поможет!

...