Support store structure changing

For example, we have a user vuex-module with this state:

{
  token: '',
  name: '',
}

The state is saved in local storage.

createMultiTabState({ statesPaths: ['user']  })

{ "token": "tokenstring", "name": "Jonn Smith" }

But some reasons we change state object to:

{
  name: '',
  auth: {
    token: ''
  },
}

And now want to keep in storage only user.auth path.

createMultiTabState({ statesPaths: ['use.auth']  })

Reload page - and it removes the state auth key! The app is broken.

client.js?06a0:97 TypeError: Cannot read property 'token' of undefined

This error happens in the getter:

{
  isAuthenticated(state) {
    return !!state.auth.token;
  },
}

And yes, I can fix it:

{
  isAuthenticated(state) {
    return !!state.auth && !!state.auth.token;
  },
}

But maybe It will be better if vuex-multi-tab-state will respect the default state and do not override it if the path does not exist in the local storage. And do not create top-level state properties if they were removed from the default state. What do you think?

[entioentio]

Random: I can imagine that for some cases it’d be actually better to store the whole store behind a version. Then by initialization you’d be able to migrate existing data.

[joshuabyler]

@andrey-hohlov What I did to get around this at least for the people using the application was on login

window.localStorage.removeItem('vuex-multi-tab')

For myself while developing on localhost I just had to manually clear it