How to sync state across browsers

[8bitDesigner]

Hey all, I'm working on web version of a board game, and I've got my MVP up and running using Vue 3 and Vuex 4. I want to swap out my Vuex stores for Pinia so that I can rely on its Typescript support, but I've run into an issue, and I was hoping some of you fine folk may have some suggestions:

In Vuex, plugins can subscribe to a store and receive mutations objects with a type and payload property which synchronously mutate the store's state. This means that if you have a Vuex store on another client (web server or other webpage) with the same initial state, you can keep it in sync by broadcasting those mutation objects from the originating client, and replaying them on the remote clients.

In Pinia, however, there are three mutation types, and only one ($patch with a patch object) shares its payload. I've sketched out a prototype with Pinia, and as best as I can tell, there's no way to "replay" either a direct mutation or a patch function as they don't include a mutation payload.

[8bitDesigner]

And to add some context:

Why can't you sync the entire state across clients?

It's gigantic; a game state object weighs in at ~2kb which you could serialize, then ship over a WebSocket connection, and then deserialize, but the overhead is hefty.

Why not use store.$onAction?

This, honestly, feels like the closest to what I want. Force all state changes to go through actions, and that have a plugin that broadcasts actions to all connected clients. Actions with long async lifecycles could be problematic, but I could break those down into smaller, composable actions, and broadcast those ones instead of the async action.

I'm not sold on this being the best approach however, as I can easily see myself or someone else directly mutating state and causing a bug that would take days to hunt down.

[8bitDesigner]

(Last self-reply, I swear): this is a good use case for #58

[posva]

This plugin seems to do what you want: https://www.npmjs.com/package/pinia-shared-state

[8bitDesigner]

It's close! But it's doing a full copy of the state, not an incremental copy of the state:

https://github.com/wobsoriano/pinia-shared-state/blob/master/packages/lib/src/index.ts#L41

And because my game state is huge, I only want to send the deltas (mutations) across the network. And given the $subscribe payload, I don't see a way to grab the mutation deltas.

[posva]

You can only grab the deltas if you force using only $patch() with an object syntax. Your other solution is building the delta mechanism yourself by keeping one single deep copy of the state (previous state)

[8bitDesigner]

Ah, that's what I'd suspected; thanks for confirming.