Reputation: 814
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
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