Vue、Vuex 和 Firestore：如何在前端显示检索到的 Firestore 数据并使其具有响应性？

Posted 2023-02-22

【中文标题】Vue、Vuex 和 Firestore：如何在前端显示检索到的 Firestore 数据并使其具有响应性？

【英文标题】：Vue, Vuex, & Firestore: How to display retrieved Firestore data on the frontend and make it reactive?

【发布时间】：2021-09-19 01:56:43

【问题描述】：

我在尝试显示 Firestore 中的数据时遇到了一些问题。数据已正确绑定到我的商店，但未显示在网页上。我相信我的问题在于 Vue 对反应性的警告。由于我对 Vue 还很陌生，我不确定如何解决这些警告以使我的数据具有响应性。 Here is a link to a screenshot 与我在网页上看到的内容、我试图显示数据的仪表板组件以及我的商店的 index.js 文件。

本项目中使用的 Vue、Vuex 和 Vuexfire 版本： "vue": "^3.0.0", "vuex": "^4.0.2", “vuexfire”：“^3.2.5”

【问题讨论】：

我更新了问题以添加 Vue、Vuex 和 Vuexfire 的版本，因为我发现我的问题是 Vuexfire 不支持 Vuex 4 不兼容。最终成为依赖问题，而不是代码问题。

【参考方案1】：

在进行了更多研究并得到另一个论坛用户的帮助后，我们发现问题在于 Vuexfire 还不支持 Vuex 4。我正在使用Firebase documentation 设置快照来设置我的 Vuex 商店中的状态。这些快照正在填充存储并在前端进行更新。如果有人偶然发现这一点并有任何问题，请随时发表评论，我可以尝试提供帮助！