Vuex 状态与 Firebase 同步

Posted 2023-02-22

【中文标题】Vuex 状态与 Firebase 同步

【英文标题】：Vuex state in sync with Firebase

【发布时间】：2018-10-12 07:10:44

【问题描述】：

我遵循一些准则来使我的 Vue.js 状态与 Firebase 同步。我在一个单独的文件夹存储中设置了对 Firebase 和 getter、突变和操作的引用。当我在没有 Firebase 连接（本地）的情况下更新状态时，它似乎工作，当我只使用 Firebasereference 和推送从其他组件更新 Firebase 时，它​​也工作 - 然后同步似乎工作。我的问题是我是否应该更新状态抛出“动作/突变”并且突变将对状态数组进行推送，并且Firebase将以某种神奇的方式更新，这在我的情况下不会发生。

那么 - 如何更新？从使用引用的组件中，例如 dbOrdersRef.push(order) 或使用例如 this.$store.dispatch('setOrder', order) 调用商店，它不会更新 Firebase（但其他局部变量会更新)。

【参考方案1】：

我觉得方案应该是这样的：

您应该以某种方式订阅 firebase 更新（我不熟悉 firebase，但我确信应该有一些机制）并且当更新来自 firebase - 您应该通过调度一些操作来改变您的商店，以让您的存储与 firebase 保持同步。

理想情况下，您的应用应仅适用于您的商店。商店应隐藏诸如 firebase 使用等实现细节。如果明天你将从 firebase 切换到其他东西，你不应该重写与商店一起工作的组件。他们仍将与商店合作并采取相同的行动。

当您更新商店中的某些内容时，您也需要更新 Firebase。我认为你可以在你的行动中做到这一点，应该没问题。这样，您可以确保将出现在您的商店中的所有更改都将在 firebase 中。例如。你打电话给someAction，它实际上做了一些firebase操作。如果您订阅了 firebase 更改，您甚至不会在该操作中执行其他操作，除了为 firebase 发送一些命令，因为您的订阅将更新您的商店。或者您可以立即改变存储（也称为乐观更新），然后等待来自 firebase 的响应，然后决定保留该更新或调用一些突变来回滚（但是在这里您应该非常小心，因为订阅 firebase 更改）。

或者，或者，您可以为您的商店编写一些插件，仅当您的商店发生某些更改时，它才会将更新发送到 firebase。在这种情况下，您的应用程序的更新首先会出现在您的商店本地，然后您的插件会将它们发送到 firebase（也许这样的插件甚至已经存在，idk）。

我不是 firebase 方面的专家，但我试图分享一些关于它应该如何工作的想法。希望这会有所帮助。

哦，回到你的问题：

dbOrdersRef.push(order) 或调用商店，例如 this.$store.dispatch('setOrder', order) 不会更新 Firebase

我认为您根本不应该在组件中使用 firebase，而应该使用您的商店。所以我宁愿建议使用第二个选项。但是您应该自己实现 firebase 更新，默认情况下，从 store 到 firebase 没有魔法更新（至少如果您没有使用具有该魔法的插件）。

【讨论】：

感谢您写得很好的答案和想法。所以我认为正确的方法是从商店更新 Firebase 并在动作/突变中执行 dbOrdersRef.push(order) 然后让 Vue 自动更新商店中的订单数组。