HMR does not work when the state is changed in Vue 3

[murugappanrm]

I defined a state in the store. It works on loading. When i change the state and save the vue script, the change in the state is not reflected. The following is the code:

import { defineStore, acceptHMRUpdate } from 'pinia';

export const useStoreNotes = defineStore('storeNotes', {
    state: () => {
        return {
            notes: [
                {
                    id: 'id1',
                    content:
                        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi qui dicta sequi, explicabo repellendus illum esse suscipit eligendi incidunt dolores.',
                },
                {
                    id: 'id2',
                    content:
                        'This is shorter Note! This change should show but did not',
                },
            ],
        };
    },
});

// make sure to pass the right store definition, `useAuth` in this case.
if (import.meta.hot) {
    import.meta.hot.accept(acceptHMRUpdate(useStoreNotes, import.meta.hot));
}

[posva]

That’s expected for existing properties so it doesn’t overwrite your state during HMR and defeat the purpose of it 😄

[murugappanrm]

Hi @posva
Thank you for the advise and answer. I understand the design concept now.

[denglouhen]

It looked weird initially, but seems reasonable because it will not lost current state value.