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?
users/${rootState.user.uid}/preventivi`