Vue存储调度错误响应没有传递给UI

Question

我试图从我的Vue存储调度方法中获得错误响应，进入我的组件，因此我可以告诉用户保存是否失败。

存储/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
}
)
}

我的组件方法

视图/Users.vue

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

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

我的store/userDetails.js文件中的响应被注销了，但它没有被传递给我的组件中的send()函数-它出现为undefined。有什么原因导致它无法通过吗?这是正确的做法吗?

Answer 1

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

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

My Component方法
App.vue

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

Answer 2

1. 尝试在Store操作中返回axios调用:

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

2. 如果这不起作用，在Store Action中使用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 3

你应该返回一个承诺，引用link:vue doc