It is possible to sync vuex state across devices?

Question

I want to make the same user, authorized on different devices, interact with the site, when the state changes, so that it synchronously changes on all devices.

Back-Ender asks to implement the mechanism via web sockets + how-to about change the state from the server(!). He says that in react-redux he calls action with type and some payload. But vuex has two entities: mutations and actions, which adds complexity! Especially when store is namespaced by modules. I would be grateful for any help.

Evaldo Bratti Evaldo Bratti · Accepted Answer · 2018-10-17T14:35:16

There is no way vuex will automatically do this for you.

Using websockets will for sure help you developing this functionality. To do this, you should bind your websocket to your vuex store instance, and when a new data is received, you commit this new data to your vuex.

User add new data in some client.
Server adds it to database.
Server sends this data through websocket to others clients
Others clients gets new data
Clients commits new data to the store, Components dependents on that data will automatically updates

What you are goind to implement is kind of a realtime database. Firebase may help you on implementing this, as it does the steps 1 to 4 for you.

What you should do in firebase would be something like:

to save data

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

to receive this change on the clients as it got saved

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
})

It is possible to sync vuex state across devices?

1 Answers