Vuex状态与Firebase同步

时间:2018-05-02 08:26:33

标签: firebase vue.js store vuex

我遵循一些指导原则让我的Vue.js状态与Firebase同步。我在单独的文件夹存储中设置了对Firebase和getter,mutging和action的引用。它似乎在我更新没有Firebase连接(本地)的状态时工作,当我仅使用Firebasereference并推送从其他组件更新Firebase时它也可以工作 - 然后同步似乎有效。我的问题是,如果我应该更新状态抛出“动作/突变”,并且突变将对状态数组进行推送,并且以魔术方式将Firebase更新,这在我的情况下不会发生。

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

1 个答案:

答案 0 :(得分:1)

我认为计划应该是这样的:

你应该以某种方式订阅firebase更新(我不熟悉firebase但我确信应该有一些机制)当更新来自firebase时 - 你应该通过调度来改变你的商店一些动作,让你与firebase保持同步。

理想情况下,您的应用只能与您的商店合作。商店应该将这些实现细节隐藏为firebase用法。如果明天您将从firebase切换到其他东西,那么您不应该重写与商店一起使用的组件。他们仍然会与商店合作并采取相同的行动。

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

或者,或者,您可以为商店编写一些插件,只有在商店中的某些更改完成后才会向firebase发送更新。在这种情况下,您的应用程序的更新将首先出现在您的商店本地,然后您的插件将它们发送到firebase(也许这样的插件甚至已经存在,idk)。

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

哦,回到你的问题:

  

dbOrdersRef.push(订单)或通过调用商店,例如此。$ store.dispatch(' setOrder',订单)不更新Firebase

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