sintj
sintj

Reputation: 814

Await for Action to finish with Async/Await in Nuxt.js (SPA, no SSR)

I'm building an app with Vue and Nuxt w/ Firebase. I have this Action in the store:

    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)
        }
    },

In a page component (a dynamic route), I load the information about that precise doc in Firestore via the created() hook:

        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()
        }

Now, everything seems to work, in fact when I go the route that matches the ID of the document in Firestore it loads all the data correctly.

My question is: does the loadPrevInfo() method wait for the dispatch to be completed? I fear that if the data to retrieve are big, the app sets this.prevDetails = {...this.getLoadedPrev} before the dispatch method retrieves all the data from firestore. Do I have to return a promise on the loadPrev action? How?

Upvotes: 2

Views: 2739

Answers (1)

Reni
Reni

Reputation: 58

No, because async/await works the similar way as promise, and code after await will wait until execution of function with await will be finished. You could also make 'created' async to be able await for loading info.

Upvotes: 3

Related Questions