Vuex-persistedstate: Have a component wait for rehydration from localstorage to complete?

[irrg]

Hi there,

I'm using vuex-persistedstate (great project!) with Nuxt.js, but I don't think Nuxt is a factor here. It's more about the vue lifecycle and such.

I'm storing a JWT token in my vuex store and letting vuex-persistedstate keep it around after a reload. However, the component that needs the token runs mounted() before the store data is rehydrated.

Is the only option here to have a watch function keep an eye on the state token value and then firing when it's not null?

[robinvdvleuten]

I would move the JWT out of Vuex and just make it a localStorage.getItem() call.

[gps035]

Old issue I know, but I found that if I avoid wrapping the setup in the call to window.onNuxtReady, then the state is rehydrated before my components initialize. This seems to solve the problem for me. Is there any downside to this approach?
(FWIW, we are running in spa mode)

[msacchetti]

Old issue I know, but I found that if I avoid wrapping the setup in the call to window.onNuxtReady, then the state is rehydrated before my components initialize. This seems to solve the problem for me. Is there any downside to this approach?
(FWIW, we are running in spa mode)

Have you found any drawbacks to this? I also figured out after hours of debugging that onNuxtReady only allows you to rehydrate state in computed properties and not in any methods or lifecycle hooks.

[wimil]

I have the same problem, do any of you cause problems by not having window.onNuxtReady?

[msacchetti]

I have the same problem, do any of you cause problems by not having window.onNuxtReady?

I had the same problem with vuex-persist plugin as well. But updating to the latest Nuxt version fixed it.

If updating to the latest Nuxt version does not fix it for this plugin, i suggest trying this other plugin, they do the same thing and the issue is not there anymore.

https://github.com/championswimmer/vuex-persist/issues/153

[lopermo]

Any solution to this? I can't use the store in my pages because it hasn't been restored by the time it mounts the page, therefore I have errors all over my website.