store from localStorage in nuxt is restored after mounted()

I’m not sure if this is the expected behavior but it certainly makes things more complicated. I thought the state would be restored if localStorage is used. But it turns out that’s not the case.

Here’s how I set it up.

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'
 
export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
      storage: window.localStorage,
      reducer: (state) => ({
        settings: {
          ...state.settings,
        }, 
    }).plugin(store);
  });
}

And when I log the state.settings object in a mounted() hook, I get the store defaults instead of the values from localStorage. Also the store.restored value seems to be always undefined. So I came up with my own work around:

// ~/store/settings.js
const state = {
  // ...
  restored: false,
}

// ~/nuxt.config.js
{
// ...
plugins: [
    { src: '~/plugins/vuex-persist', ssr: false },
  ],
}

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'
 
export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
      storage: window.localStorage,
      reducer: (state) => ({
        settings: {
          ...state.settings,
          restored: true,
        }, 
    }).plugin(store);
  });
}

// pages/test.vue
export default {
  watch:{
    restored(val){
      if(val === true){
        // do things
      }
    }
  },
  computed:{
    restored(){
      return this.$store.state.settings.restored;
    }
  }
}

[kreig303]

@snakemastr when you say “global” what do you mean?

fwiw if you meant the store persists between applications in the same session, then use the key parameter. we had the same issue.

edit: my instructions edited to include this fact.

[kreig303]

we had to implement it a different way from the instructions in the readme to get it work for us.

no promises! ymmv! etc

---

instead of using vuex-persist as a nuxt plugin and adding the suggested file into the ./plugins directory and the config, we just imported it directly in our store file, like so:

...
import foo from 'vuex-persist'
...
const bar = new foo({
  key: 'unique-key-if-needed'
  ...
})
...
export const plugins = [bar.plugin]

We also still do the transpile step in the nuxt config, i.e.

module.exports = {
  ...
  build: {
    transpile: ['vuex-persist'], // this module is normally esm only
    ...
  }
  ...
}

It’s possible that the plugin author’s instructions are simply dated. Things change a lot in nuxt minor versions!