Nuxt this.$route 未定义

Question

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

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

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

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

但现在我收到一条错误消息，提示“TypeError: Cannot read property '$route' of undefined”。这很奇怪，因为如果我将路由记录到控制台，我实际上可以看到 id。此外，调用 ".doc("DOCUMENT_ID") 效果很好。

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

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

出现同样的错误...

Answer 1

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

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

export default {
  firestore() {
    // ✅ `this` is Vue component instance inside function
    return {
      products: firebase.firestore().collection("products").doc(this.getProductId),
    }
  }
}