firebase - 在 vuefire 的 firestore 内的“this”中获取“undefined”

Question

我在我的 Vue 应用程序中使用 firebase-auth 和 firebase-firestore，并使用 vuefire 从 firestore 检索用户数据。

所以，在我的例子中：

data() {
  return {
      user: firebase.auth().currentUser
  }
},
firestore: {
  userData: db.collection("users").where("uid", "==", this.user.uid)
}

但是当代码执行时，“this”，应该是 Vue 的实例，是未定义的。我该如何解决这个问题？

Answer 1

您无法立即对商店做出反应。当时无法保证 firebase 实例已创建并且您可以使用它。

data() {
  user: {},
  userData: {}
},

现在您可以从您的 Firestore中返回相同的属性：

firestore () {
  return {
    user: firebase.auth().currentUser,
    userData: db.collection("users").where("uid", "==", firebase.auth().currentUser.id)
  }
}

请注意，在上面^您无法使用this.user.id，因为user在您尝试访问它之前可能尚未写入。但是你可以使用firebase.auth().currentUser.id

Answer 2

您必须返回您的数据，如下所示：

data() {
    return {
      user: firebase.auth().currentUser
   }
}

Answer 3

我遇到了同样的问题，不知道为什么this是未定义的。作为一种解决方法，您可以在钩子中使用编程绑定，如下所示：created

  created() {
    this.$bind('userData', db.collection("users").where("uid", "==", this.user.uid))
  },