Get data from Firebase in Vue.js component

Question

I'm starting my first serious app with Vue.js and I have an issue gathering data from Firabase. The idea here is simply to get data linked to an user ID. My first though was to store that in a computed value, like so

export default {

  ...

  computed: {
    userInfo: function() {
      const firestore = firebase.firestore();
      const docPath = firestore.doc('/users/' + firebase.auth().currentUser.uid);

      docPath.get().then((doc) => {
        if (doc && doc.exists) {
          return doc.data();
        }
      });
    }
  }
}

But, when I try to access this variable, it's undifined .

My guess is that the value is computed before the asynchronous call has ended. But I can't see how to get around it.

Answer 1

Indeed you have to take into account the asynchronous character of the get() method. One classical way is to query the database in the created hook, as follows:

export default {

  data() {
    return {
      userInfo: null,
    };
  },

  ....

  created() {
      const firestore = firebase.firestore();
      const docPath = firestore.doc('/users/' + firebase.auth().currentUser.uid);

      docPath.get().then((doc) => {
        if (doc && doc.exists) {
          this.userInfo = doc.data();
        }
      });
  }

}