vue + firestore:如何使用 vuefire 绑定/合并数据?
Posted
技术标签:
【中文标题】vue + firestore:如何使用 vuefire 绑定/合并数据?【英文标题】:vue + firestore: how to bind / merge data with vuefire? 【发布时间】:2021-06-23 14:50:31 【问题描述】:我有一个以这种方式构建数据的云火库:
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))
【问题讨论】:
购物篮中的产品ID 是字符串还是引用?如果它们是字符串,您可以存储 Firestore 引用吗? productIDs 存储为字符串 @ThomasKuhlmann 我已经存储了引用,现在我在basket
对象中获取了相关的产品数据。我认为这正是我正在寻找的,我还不熟悉参考资料。谢谢你的帮助;-]
【参考方案1】:
很高兴我的指针有帮助!
为了完整起见 - 上面提到的最佳解决方案是简单地存储引用,vuefire 会自动提取这些引用并将它们相应地保存为篮子的一部分,这要归功于 maxRefsDepth
选项。
除此之外,您还可以在获取篮子时使用serialize option of vuefire 来修改(和查询其他)数据。
但这会相当复杂,您最好还是使用 firebase SDK 手动订阅。
【讨论】:
以上是关于vue + firestore:如何使用 vuefire 绑定/合并数据?的主要内容,如果未能解决你的问题,请参考以下文章
Firestore、vue、vuex、vuexfire:如何让 getter 真正从存储中获取数据?
如何使用来自 GCP Firestore 的大量数据在 Vue.js 数据表中工作
Vue Firestore 查询。 Firestore更新数据时如何避免重复?