我正在我的 vue-cli 项目中获取一些数据。
我正在使用 Vuex 来存储数据。
除了我得到一个空数组之外,一切都成功运行,我已经在 Postman 中 checkin ,它运行完美。
正如您在我的操作中看到的那样,我在 if
语句中进行了提交,目前已被注释掉并移动。但是当在那里运行时,我得到了一个 Promise
返回。作为我代码的当前版本,我得到一个空数组。
我真的看不出我的错误是什么,所以我最好的选择是你们能够看到我遗漏了什么。
首先我有我的 Action :
export default {
async getProLanguages({ commit }) {
commit(C.PROLANGAUGE_DATA_PENDING);
try {
const res = await fetch('https://dev-webapp-kimga5xexrm3o.azurewebsites.net/api/ProLang', {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer xxx'
}
});
if (res.status === 200) {
console.log(res);
// commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
}
else {
commit(C.PROLANGAUGE_DATA_NO_CONTENT);
}
console.log(res)
return commit(C.PROLANGAUGE_DATA_SUCCESS, JSON.stringify(res.json()));
}
catch (e) {
commit(C.PROLANGAUGE_DATA_FAILURE);
}
}
还有我的突变:
/**
* Indicates that programming language has succeded
*
* @param state
* @param payload
*/
[C.PROLANGAUGE_DATA_SUCCESS](state, payload) {
state.programmingLanguages = { ...state.programmingLanguages, loading: false, error: false, noContent: false, items: payload }
},
我有我的默认状态,它被导入到 state.js
中:
const getDefaultState = () => ({
programmingLanguages: {
loading: false,
error: false,
noContent: false,
items: [
{
id: undefined,
name: undefined
}
]
}
});
我用 beforeRouteEnter
调用我的操作:
beforeRouteEnter(to, from, next) {
store.dispatch('programmingLanguages/getProLanguages').then(() => {
next();
});
}
最后在我的组件中,我从 Vuex 导入 mapState
:
computed: {
...mapState({
prolangs: state => state.programmingLanguages.programmingLanguages.items
})
}
最佳答案
我认为像 items = await res.json()
这样的东西,然后提交 items
可能是一种前进的方式(确保所有 promise 都得到解决)。
关于javascript - Vue,获取返回空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57339167/