Получить данные из Firebase в компоненте Vue.js

Question

Я запускаю свое первое серьезное приложение с Vue.js, и у меня возникает проблема со сбором данных из Firabase.Идея здесь состоит в том, чтобы просто привязать данные к идентификатору пользователя.Сначала я хотел сохранить это значение в computed, например

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();
        }
      });
    }
  }
}

Но когда я пытаюсь получить доступ к этой переменной, это undifined.

Я предполагаю, что значение вычисляется до завершения асинхронного вызова.Но я не вижу, как это обойти.

Answer 1

Действительно, вы должны принять во внимание асинхронный характер метода get(). Один классический способ - запросить базу данных в хуке created следующим образом:

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();
        }
      });
  }

}