在 vuefire 的 firestore 中获取 "undefined" in "this"

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

你必须return你的数据，像这样：

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

Answer 2

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

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

现在您可以从您的 firestore return相同的属性：

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 3

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

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

在 vuefire 的 firestore 中获取 "undefined" in "this"

Getting "undefined" in "this" inside firestore in vuefire

firebase

vue.js

firebase-authentication

vuefire

google-cloud-firestore