我使用TypeScript和Vue / Vuex来创建一个玩具应用程序,我需要在渲染组件时从远程API加载项目列表 . 在下面的操作中,我使用库 axios
发出http请求,并将其作为承诺返回:
const actions = {
getCurrentSession(context: Context) {
return axios.get("http://localhost:3000/sessions/current")
.then((res) => {
commitSharedFiles(context, res.data.shared_files);
})
.catch((e: string) => {
console.error(e);
});
}
};
// export action
export const dispatchGetSharedFiles = dispatch(actions.getCurrentSession);
// commit
export const commitSharedFiles = commit(mutations.setSharedFileList);
// mutations to the state tree
const mutations = {
setSharedFileList(state: State, sharedFiles: StoreState.DirFile[]) {
state.sharedFileList = sharedFiles;
}
};
由于操作的异步性质,我必须在从存储/状态树中检索提取的文件列表之前解析promise:
// this is called in the mounted() life cycle method:
Store.dispatchGetSharedFiles(this.$store).then(res => {
this.sharedFiles = Store.readSharedFilesList(this.$store);
});
这有效,但我认为解决这个承诺然后获取数据是非常复杂的 . 有没有更好的方法在Vuex中使用异步操作?谢谢
1 回答
使用
async/await
执行操作,使用映射的getter
检索商店中的项目(也可以映射操作) .使用此模式可以从vuex的反应性中受益,因此组件中的
sharedFiles
将在操作完成并提交响应数据时触发更新 . 您的模板可能如下所示: