vue + firestore：如何使用 vuefire 绑定/合并数据？

如何解决vue + firestore：如何使用 vuefire 绑定/合并数据？

我有一个以这种方式构建数据的云 Firestore：

baskets

    basket 1
        basketID
        userID
        description
        products
            productID
            productID
    basket 2
        basketID
        userID
        description
        products
            productID
            productID
    ...
    basket N

products

    product A
        productID
        description
        productImg
        price
    product B
        productID
        description
        productImg
        price
    ...
    product Z

这种结构是为了避免在每个购物篮文档中复制详细的产品数据。

我创建了一个 vue 组件来同时显示购物篮数据和与购物篮关联的产品数据，同时尝试限制和优化 firebase 查询。我已经成功绑定了这样的购物车数据：

  data() {
    return {
      basket: [],basket_products: []
    };
  },created() {
    this.$bind('basket',db.collection("baskets").where("basketID","==",this.basketID))
  }

但是我正在努力绑定当前篮子的 basket_products 数据。我正在寻找这样的东西：

    this.$bind('basket_products',db.collection("products").where("productID",'in',ONE OF THE PRODUCT_IDS WITHIN CURRENT BASKET,EQUIVALENT TO this.basket[0].products))

解决方法

很高兴我的指针有帮助！

为了完整起见 - 上面提到的最佳解决方案是简单地存储引用，vuefire 会自动选择这些引用，并通过 maxRefsDepth 选项将它们相应地保存为篮子的一部分。

除此之外，您还可以在获取篮子时使用 serialize option of vuefire 来修改（和查询其他）数据。

但这会相当复杂，您最好使用 firebase SDK 手动订阅。