Связывание данных Vue и Firestore

Question

Я хочу получить данные из firestore и связать их с данными vue.

Я получаю данные firestore следующим образом в созданном хуке жизненного цикла:

  created(){

console.log(firebase.auth().currentUser);
const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
docRef.get().then(
  function(doc){
    if(doc.exists){
      console.log(`Document data: ${doc.data()}`);
      this.user = doc.data();
    } else {
      console.log(`Doc data is undefined`);
    }
  }).catch(function(err){
    console.log(`Oops: ${err.message}`);
  });
}

Проблемав том, что this не относится к экземпляру vue, на самом деле this не определено в точке, где я пытаюсь установить переменную пользователя.Как я могу связать данные пользователя с данными vue?Кажется, я что-то упускаю и не могу понять, в чем может быть проблема.

Конечная цель - создать форму, позволяющую пользователю изменять свои данные.

(распечатка doc.data () дает ожидаемые результаты)

Answer 1

Обратный вызов then - это отдельная функция, поэтому при обращении к this внутри этой функции он ссылается на обратный вызов then.Вам необходимо создать ссылку на виртуальную машину Vue до обратного вызова then.

Попробуйте это:

created(){

console.log(firebase.auth().currentUser);
const docRef = firebase.firestore().collection("users").doc("VezLOaumLCza8jih8Ylk");
var vm = this; //creating the reference to the Vue VM.
docRef.get().then(
  function(doc){
    if(doc.exists){
      console.log(`Document data: ${doc.data()}`);
      vm.user = doc.data();
    } else {
      console.log(`Doc data is undefined`);
    }
  }).catch(function(err){
    console.log(`Oops: ${err.message}`);
  });
}