vue + firestore:如何使用 vuefire 绑定/合并数据?
vue + firestore: how to bind / merge data with 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 手动订阅。
我有一个云 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 手动订阅。