Question

我正在尝试在异步请求完成后显示祝酒词。我已经实现了此过程：

单个文件组件在我的VueX存储中调用updateUserProfile（）操作
updateUserProfile（）操作使用Axios在服务器上发出传出HTTP请求
成功后，我使用一个变体来更新商店中的用户个人资料，我想展示我的单个文件组件中的祝酒词。

问题是响应对象在我的组件中始终是未定义的。我的错误在哪里？

错误：

profile.vue？a62a：328未捕获（承诺）TypeError：无法读取未定义的属性“数据” 在评估时（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.");
            }
        });
    }
}

Answer 1

好吧

最好是从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元素以便在用户界面中显示。

这里在工作example

希望这会有所帮助！

VueX / VueJs：异步处理后在组件中执行代码

1 个答案: