在 Nuxt.js 中使用 Async/Await 等待操作完成（SPA，无 SSR）

Question

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

    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() 方法是否等待调度完成？我担心如果要检索的数据很大，应用程序会在调度方法从 firestore 检索所有数据之前设置this.prevDetails = {...this.getLoadedPrev}。我是否必须在 loadPrev 操作上做出承诺？怎么样？

Answer 1

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