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

Question

我正在使用 Vue 和带有 Firebase 的 Nuxt 构建一个应用程序。我在商店里有这个 Action :

    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() Hook 在 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 操作的 promise ？怎么办？

Answer 1

不，因为 async/await 的工作方式与 promise 类似，await 之后的代码将等待直到带有 await 的函数执行完成。您还可以使“已创建”异步，以便能够等待加载信息。