VuexFire Synchronization with bind not working

Question

I'm currently using VuexFire to bind the Cloud Firestore to my Vuex State. I'm having some issues getting it to work, any help would be appreciated.

What I'm currently doing is the following:

Vue.js File:

  methods:{
    ...mapActions("comments", ['bindArticleComments']),
 },created(){
    this.bindArticleComments()
  },

actions/comments file

  export const bindArticleComments = firestoreAction(({ bindFirestoreRef }) => {
    return bindFirestoreRef('articleComments', collectionRef('comments'))
  })

firebase services file

export const collectionRef = (collectionName) => {
  return firestore().collection(collectionName)
}

What is strange about this is that I'm already doing the same procedure for a different Vuex state field. There it seems to be working without an issue. Is there anything that anyone thinks I might not be doing properly?

Answer 1

Strangely i got it working , although i'm struggling to understand how and why it's working.In my Vue js file i placed the this.bindArticleComments() after downloading the data and at creation.

methods:{
 downloadComments(){
        const { articlesCommentRef } = this.$fb

        articlesCommentRef(this.loadedArticle.id).get()
          .then(querySnapshot => {
              this.setArticleComments(querySnapshot.docs.map((doc) => doc.data()))
              this.bindArticleComments(this.loadedArticle.id)})
          .catch(error => console.log("Error getting documents: ", error))
          .finally(() => {this.$q.loading.hide()})
      }
},
 created(){
    this.bindArticleComments(this.loadedArticle.id)
  },
  mounted(){
        this.downloadComments()
  }