可以跨设备同步 vuex 状态吗？答案

【问题标题】：It is possible to sync vuex state across devices?可以跨设备同步 vuex 状态吗？
【发布时间】：2019-03-20 11:03:38
【问题描述】：

我想让在不同设备上获得授权的同一个用户与站点交互，当状态发生变化时，它会在所有设备上同步变化。

Back-Ender 要求通过 web 套接字 + 关于 从服务器更改状态（！） 的方法来实现该机制。他说在 react-redux 中他用 type 和一些 payload 调用 action。但是 vuex 有两个实体：mutations 和 actions，这增加了复杂性！特别是当 store 由模块命名时。如果有任何帮助，我将不胜感激。

【问题讨论】：

标签： websocket vuejs2 synchronization vuex

【解决方案1】：

vuex 不会自动为你做这些。

使用 websockets 肯定会帮助您开发此功能。为此，您应该将您的 websocket 绑定到您的 vuex 存储实例，当收到新数据时，您将这些新数据提交到您的 vuex。

用户在某些客户端中添加新数据。
服务器将其添加到数据库中。
服务器通过 websocket 将此数据发送给其他客户端
其他客户获取新数据
客户端向存储提交新数据，依赖该数据的组件将自动更新

您要实现的是一种实时数据库。 Firebase 可以帮助您实现这一点，因为它会为您执行步骤 1 到 4。

您应该在 firebase 中执行的操作类似于：

保存数据

firebase.database().ref('/some/path').push({a:1, b:2})

在保存后在客户端接收此更改

firebase.database().ref('/some/path').on('child_added', (snapshot) => {
    const newData = snapshot.val()
    //newData will be {a: 1, b: 2}
    //here you would commit this data in to your store

    //this callback will be called always when a 
    //object is pushed to '/some/path', so you only have to setup this once
})

【讨论】：