Vuex-persistedstate: How can I force Vuex to reload state from localStorage?

[zeroarst]

• vuex-persistedstate version: 2.5.4
• node version: v8.11.1
• npm (or yarn) version: 5.6.0

Relevant code or config

Problem description:
I am using vuex-persistedstate with localStorage to store the data.

I am trying solve the problem where when two tabs opened, one's storage is updated, say auth token refreshed, the other tab still keeps the old state, which means it gets the old token. I guess it is cached and not load data from localStorage.

Currently I am using window.addEventListener('storage', (e) => { }) to observe the changes and I am able to compare two tokens, if tokens are different, I manually mutate the state to the new one.

But this is not the ideal solution for me. It would be good that I can somehow force the vuex to load the data from localStroage to the state. How can I do that?

[gabrielmbmb]

Any solution to this? I'm having the same problem...

[brd6]

Same here

[dubonzi]

Same issue. I've also been using onstorage to update vuex but on a big application this can get really messy.

[gabrielmbmb]

I made a small plugin for Vuex who updates automatically the state saved in localStorage. If you want you can have a look.

[rgoupil]

@gabrielmbmb with the link it's better, isn't ?
https://github.com/gabrielmbmb/vuex-multi-tab-state

[robinvdvleuten]

You can just use eventlisteners for such usecases.