2

我有一个名为 products/_id 的动态路由，它应该从 Firestore 加载产品。我正在使用 VueFire 从 Firebase 数据库中获取产品。获取整个产品集合非常好。

firestore: {
    product: firebase
      .firestore()
      .collection("products")
}

但是获取具有特定 id 的文档是麻烦的开始。通常我会打电话

firestore: {
    product: firebase
      .firestore()
      .collection("products")
      .doc(this.$route.params.id),
  }

但现在我收到一条错误消息：“TypeError：无法读取未定义的属性 '$route'”。这很奇怪，因为如果我将路由记录到控制台，我实际上可以看到 id。此外，调用 ".doc("DOCUMENT_ID") 工作得很好。

任何人都知道如何解决这个问题？我尝试了结合使用方法和挂载的钩子来检索 id 但无济于事。

  mounted() {
    this.getProduct();
  },
  methods: {
    getProductId() {
      return this.$route.params.id;
    },
  },
  firestore: {
    products: firebase.firestore().collection("products").doc(this.getProductId),
  }

带来同样的错误......

4

1 回答 1

1

firestore在这里被指定为一个对象，因此它会立即在组件的上下文之外进行评估，因此this不会是 Vue 组件实例。

要解决此问题，请指定firestore为返回预期对象的函数，如文档中所示：

export default {
  firestore() {
    // ✅ `this` is Vue component instance inside function
    return {
      products: firebase.firestore().collection("products").doc(this.getProductId),
    }
  }
}
于 2021-03-11T00:49:23.173 回答