javascript - 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() 给出了预期的结果）

标签： javascriptfirebasevue.jsgoogle-cloud-firestore

Answer 1

then回调是一个单独的函数，因此在该this函数内部访问时，它是在引用then回调。您需要在then回调之前创建对 Vue VM 的引用。

尝试这个：

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