代码之家 › 专栏 › 技术社区 › erup

vue+firestore:如何使用vuefire绑定/合并数据?

vuefire google-cloud-firestore vue.js firebase

0

erup · 技术社区 · 3 年前

我有一个云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))

0 回复 | 直到 3 年前

1

Thomas Kuhlmann 3 年前

很高兴我的指针帮了忙!

为了完整性起见——前面提到的最佳解决方案是简单地存储引用,vuefire会自动提取这些引用,并相应地将它们保存为篮子的一部分,这要归功于 maxRefsDepth 选项

除此之外,你还可以和 serialize option of vuefire 获取篮子时修改(和查询其他)数据。

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