等待操作在Nuxt.js中完成Async/Await(SPA，无SSR)

Question

我正在用Vue和Nuxt w/Firebase构建一个应用程序。我在商店里有这个动作：

async loadPrev({commit, rootState}, payload) {
try{
let doc = await this.$fireStore.collection(`users/`+ rootState.user.uid + `/preventivi`).doc(payload).get()
commit(`setLoadedPrev`, doc.data())
}
catch(e){
console.log(e)
}
},

在一个页面组件(一个动态路由(中，我通过created((钩子在Firestore中加载关于那个精确文档的信息：

data(){
return{
prevDetails: {}
}
},
computed: {
...mapGetters({
getLoadedPrev: `prevs/getLoadedPrev`
})
},
methods:{
async loadPrevInfo(){
try{
await this.$store.dispatch(`prevs/loadPrev`, this.$route.params.id)
this.prevDetails = {...this.getLoadedPrev}
}
catch(e){
console.log(e)
}
}
},
created(){
this.loadPrevInfo()
}

现在，一切似乎都正常，事实上，当我走与Firestore中文档ID匹配的路线时，它会正确加载所有数据。

我的问题是：loadPrevInfo()方法是否等待调度完成？我担心，如果要检索的数据很大，应用程序会在dispatch方法从firestore检索所有数据之前设置this.prevDetails = {...this.getLoadedPrev}。我必须对loadPrev行动做出承诺吗？怎样

Answer 1

否，因为async/await的工作方式与promise类似，在await之后的代码将等待，直到使用await的函数执行完毕。您也可以使"created"异步，以便能够等待加载信息。