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

Posted 2023-02-22

【中文标题】在 vuefire 的 firestore 内的“this”中获取“undefined”

【英文标题】：Getting "undefined" in "this" inside firestore in vuefire

【发布时间】：2019-10-03 21:31:58

【问题描述】：

我在我的 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的实例，是未定义的。 我该如何解决这个问题？

【问题讨论】：

您是否要在 vue 实例上定义一个名为 firestore 的道具？我认为您希望这是一种方法。

不，拼写正确……是vuefire的语法

【参考方案1】：

你必须返回你的数据，像这样：

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

【讨论】：

我写这个问题的时候不好...返回已经定义了

【参考方案2】：

您无法立即对商店做出反应。当时无法保证 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

【讨论】：

他们可以使用beforeCreate() 钩子来启动组件吗？

请注意，表达式db.collection... 生成的是文档引用，而不是文档。 OP 必须执行异步操作（可能是 get()）才能获取文档。

@LenJoseph firebase 没有任何必要。 firestore 定义在 created 上运行。

@danh 你不需要在这里异步执行它，因为vue-firestore 插件实际上为你处理了响应属性的等待和定义。

@danh Yep have a look at this line。它定义了响应属性并在将其应用到容器之前等待源。

【参考方案3】：

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

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

【讨论】：

与此同时，我不得不寻找另一种解决方法，但我测试了您的解决方案并完全满足了我当时的需求！