2

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?

2
  • You could also format strings without substitution ` users/${rootState.user.uid}/preventivi ` Commented Nov 5, 2019 at 14:39
  • 1
    @user3479125 thanks! Commented Nov 5, 2019 at 14:49

1 Answer 1

3

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Sweet, how do you achieve that?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.