Since mutation is gone, we have no proper way to sync and track state across browser/node.js process

What problem is this solving

In the past with Vuex, we could sync store state across tabs or even node.js process by overriding mutation and propagate them. reference: vuex-electron The synchronization can be done well because mutations are cheap and synchronize. Also, by propagating mutations execution we can ensure the exact delta change among all the tabs/processes are the same.

However, as Pinia doesn't come with mutations, it even allow developer update state directly, we no longer be able to grab the exact delta change by mutation just like how we did before. Therefore, many pinia libraries that claimed to support Pinia state sync will cause unexpect side effect and watcher to be triggered under the hood, take pinia-shared-state as example:

  watch(
    () => store[key],
    (state) => {
      if (!externalUpdate) {
        timestamp = Date.now();
        channel.postMessage({
          timestamp,
          state: devalue.parse(devalue.stringify(state)),
        });
      }
      externalUpdate = false;
    },
    { deep: true },
  );

The mechanism under the hood is to deep tracking every root level state entry by DEEP watching them, which mean once any of the deep/nested property has changed, the syncing will be triggered. By reading the snippet above, we can see that the librar will propagate the whole state to other tabs, which means that all watchers [by object reference] from other tabs will be triggered, since a whole new state object is constructed and applied into these tabs state. To demostrate it as example, I provide the snippets below

// works fine
watch(
  () => store.level1.valueTypeProperty,
  () => { console.log('this watcher can always trigger fine as it is watching value type'); }
);

// will be trigger unexpectedly
watch(
  () => store.level1.referenceTypeProperty,
  () => { console.log('this watcher could trigger unexpectedly when store.level1.referenceTypeProperty.someValue changed'); }
);

Since we cannot always ask the developers to watch only value type, it must cause many watchers to be triggered and unexpected side effect will be occurred in long term.

Proposed solution

I keep thinking for few days and could not come out with any solution/workaround. I know the design is Pinia core basis and it could not be changed easily. Although I have some possible workaround in my head, it is not decent. Therefore, it would be nice if anyone can provide any workaround to achieve that. Thanks in advance

Possible Workaround:

Find some way to optionally enforce developer to use only store.$patch(() => { /* update state */ }) to update state, the store.$patch() function returns the key path which the properties have been updated
Bring mutation back
Allow developer to enable DebuggerEvent for production so that we can have better trace on state mutation in store.$subscribe()

Describe alternatives you've considered

No response

vuejs / pinia