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

Question

我正在使用 Vue 和 Nuxt 以及 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() 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 的函数执行完成。 您还可以使“创建”异步，以便能够等待加载信息。