Wrong data after restore.

[papaIOprog]

• vuex-persistedstate version: 4.1.0
• node version: 14.15.4
• npm (or yarn) version: 6.14.10

Relevant code or config:

export const state = () => ({
  colorScheme: {
      base: {"bg-color-primary": true},
      light: {"bg-color-primary-light": true},
      dark: {"bg-color-primary-dark": true}
    }
})

export const mutations = {
  changeColor(state, colorName) {
    state.colorScheme.base = {"bg-color-orange": true};
    state.colorScheme.light = {"bg-color-orange-light": true};
    state.colorScheme.dark = {"bg-color-orange-dark": true}
  }
}

What you did:

• Install package and use default plugin from readme (Example with Nuxt.js)
• Called mutation
• Reloaded browser

What happened:

• Localstorage restored after window reload, BUT, it has following states:

{
  "base": {
    "bg-color-primary": true,
    "bg-color-orange": true
  },
  "light": {
    "bg-color-primary-light": true,
    "bg-color-orange-light": true
  },
  "dark": {
    "bg-color-primary-dark": true,
    "bg-color-orange-dark": true
  }
}

// Following data was in localstorage before reload
{
  "base": {
    "bg-color-orange": true
  },
  "light": {
    "bg-color-orange-light": true
  },
  "dark": {
    "bg-color-orange-dark": true
  }
}

Problem description:

• Store being restored, but it has merged default objects in store with restored ones.

[Harm-Nullix]

May I say:

U are using a mutation to do three updates, consider using an action

Next of, u are setting a default state, that state will always be used on start, and if you have updates, things will get merged. If they were not, a lot of other use cases would fail.

Is your localstorage updated with the default, or does it live in you vuex object? In any way, you could use sometinhg like the overwrite attribute of the API. Or look for another option, if the "error" is in the plugin, you could find the fix for your case there.