@Miki U

I was able to improve on this a bit in my own usage to clean up your concern in tip #1.

In your local store you can individually update your state data without effecting your mutations by handling the specific keys you want to persist through the page reload.

created() {
    // persisted keys that need to be stored
    const keysToRestore = ['key1', 'key2', 'key3', 'key4', 'key5'];

    // restore any session stored keys that should be persisted through page refresh
    keysToRestore.forEach(key => {
        const savedValue = sessionStorage.getItem(`store_${key}`);
        if (savedValue !== null) {
        try {
            this.$store.state[key] = JSON.parse(savedValue);
        } catch (e) {
            console.warn(`Failed to parse stored ${key}`, e);
        }
        }
    });

    // On page unload, save those keys back to sessionStorage to persist through page refresh
    window.addEventListener('beforeunload', () => {
        keysToRestore.forEach(key => {
        const value = this.$store.state[key];
        sessionStorage.setItem(`store_${key}`, JSON.stringify(value));
        });
    });
}