Vuex-persistedstate: State is not immediately loaded into the store

[victor192]

And use vuex-persistedstate plugin in Nuxt together with js-cookies. I noticed such a thing that when the page loads, the properties from state are not immediately initialized from cookies, but only after the page is fully loaded. It turns out that first the value of state is taken as from the store, and then replaced by the value of cookies. Is it possible to follow so that the values in the state are immediately initialized from cookies?

[Jesus82]

Same happens under Nuxt using localStorage.

[roeeyn]

I have the same issue, does anybody have a workaround?

[woodgates]

Same problem here. Local storage persist on the client only. When you go to NUXT the store is as its default configuration. This makes the plugin unuseful with NUXT.

I guess there should be a workaround with nuxtServerInit, if anyone can help.

@victor192 I suggest to put 'nuxt' in the subject.

[Jesus82]

@woodgates I can use it with Nuxt with the following configuration, the only problem is that there is always a less than 1s lapse until LocalStorage is loaded (at least in my case). My configuration is:

_plugin/vuex-persitedstate.js_

import createPersistedState from 'vuex-persistedstate'

export default ({store, isHMR}) => {

  if (isHMR) return;

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      createPersistedState({
        paths: ['myVariableInLocalStorage','myAnotherVariableInLocalStorage'],
      })(store); 
    });
  }
}

_nuxt.config.js_

plugins: [
    { src: '~/plugins/vuex-persistedstate', ssr: false },
]

[woodgates]

@Jesus82
Hi. Although the solution works it still has a problem. The vue-router middleware is loaded before the persist plugin, so, when the middleware is executed the store is empty. This is an issue if you are managing user logins with Store.

[d0peCode]

Same issue here. When page loads I can see element which is conditonally displayed on vuex value. Element disapear after a part of second. I tried @Jesus82 solution but still I can see element for a part of second when SPA is loading. This makes my page "jumping" because element is 100% width and 30vh height so it looks very ugly. I'm using nuxt and localStorage.

[moifort]

I have the same issue, is because you used window.onNuxtReady. If you want to load immediately write your plugin like below:

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => createPersistedState({})(store)

[robinvdvleuten]

This plugin was never meant to be used with Nuxt.js, so I am gonna close this for now. Please move to a appropiate support channel like StackOverflow.

[Petercopter]

@moifort That works! Right...? It seems to be working...