Vue 商店调度错误响应未传递给 UI

Question

我正在尝试从我的 Vue 商店调度方法中获取错误响应，并将其放入我的组件中，这样我就可以告诉用户保存是否失败。

store/userDetails.js

const state = {
    loading: {
        user_details: false,
    }
}

const getters = {
    // Getters
}

const actions = {

save({commit, dispatch, rootState}, payload) {
    commit('setLoading', {name: 'users', value: true});
    axios(
        _prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
    ).then((response) => {
        if (response.data) {
            commit('setState', {name: 'user_details', value: response.data.units});
            commit('setLoading', {name: 'user_details', value: false});
            dispatch(
                'CommonSettings/setSavingStatus',
                {components: {userDetails: "done"}},
                {root:true}
            );
        }
    }).catch((error)=> {
        console.log(error)
        return error
    }
    )
}

我的组件方法

views/Users.vue

  send() {
    this.$store.dispatch({
      type: 'Users/save',
      userDetails: this.current
    }).then(response => {
      console.log(response)
    });
  },

以上，我在两个地方注销了响应。

我的 store/userDetails.js 文件中的响应可以正常注销，但它没有传递到我组件中的 send() 函数 - 它显示为 undefined。有什么理由不能通过？这是执行此操作的正确方法吗？

Answer 1

尝试在商店操作中返回 axios 调用：

// add return
return axios(
    _prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
  )
  .then()   // your stuff here
  .catch()  // your stuff here

如果这不起作用，请在商店操作中使用 Promise。像这样：

return new Promise((resolve, reject) => {
  return axios() // simplify for readibility reason, do your stuff here
    .then((response) => {
      //... your stuff here
      resolve(response) // add this line
    })
    .catch((error) => {
      // ... your stuff here
      reject(error) // add this line
    })
})

Answer 2

你应该return一个承诺，参考link：vue doc

Answer 3

这对我有用。试试这个解决方案。
store.js

actions: {
    save(context, payload) {
      console.log(payload);
      return new Promise((resolve, reject) => {
        axios(url)
          .then((response) => {
            resolve(response);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  },

我的组件方法
App.vue

save(){
     this.$store.dispatch("save", dataSendToApi).then((response)=>{
       console.log(response)
     })
    }

Vue 商店调度错误响应未传递给 UI

Vue store dispatch error response not being passed to UI

javascript

vue.js

axios

vuex

vuejs2