store.$patch is actually a $put?

[daniesy]

Heya!
I build a store with an array of blocks, similar to this one

interface Block {
    id: string;
    type: string;
    content: string;
   // ...
}

export const useStore = defineStore("store", () => {
    const blocks: Ref<Block[]> = ref([]);
});

This store is used in my main app and in an app loaded in an iFrame inside my main app. Each uses a different instance, so I wrote a plugin to synchronize the two stores by using the Post Message API and listening for store.$subscribe. Whenever one store state changes, it is sent to the other app. I use store.$patch to update the other store content with the value sent in the Post Message API.

Sending the store to the other component :

const handleStoreChanged = (storeId: string, state: StateTree, target: ITarget) => {
  const payload: IMessage = {
    source: `pinia-iframe-${target.id}`,
    storeId,
    data: JSON.stringify(state)
  };

  target.sender.postMessage(payload, "*");
};

Parsing the message:

const handleMessageReceived = (store: Store, message: IMessage) => { 
    store.$patch(JSON.parse(message.data));
};

However, whenever I use $patch, every component that uses the blocks gets re-rendered. Is there any way to update only the changed values in the blocks array? I don't want to replace the whole blocks array. Even stranger, every component seems to be unloaded first and then loaded again, making the UI flash for a few microseconds.

For example, if I add an image block and a header block (v-for with keys) and I change the header content in the iframe, the image will reload in the parent after the $patch runs in the parent store.

I tried listening for store.$onAction and recreating the action on the other store, but it doesn't cover the whole use cases.