Newbe Question - Restore data from localStore to Vuex on page reload in Nuxt.js

[vishytk]

My Setup details:

• nuxt 2.15.7:
• vuex-persistedstate 4.1.0:
• node 16.13.1:
• yarn 1.22.15:

the plugin code copied from the discussions here.

plugins/persistedstate.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store, isHMR }) => {
  if (isHMR) return
  if (process.browser) {
    createPersistedState({
      key: applocal,
      paths: ['index', 'validation'],
    })(store)
  }
}

I can see the data stored in the localStore with the key name 'applocal'

I am new to programming and nuxt, so do not know how to write back the data from localstore to vuex on page reload. Currently, the page is going blank with vuex being empty.

[vishytk]

I have tried the following but has not worked for me.

added following function in store/index.js and tried calling the function from inside a page (pages/index.vue) But I get "localStore is not defined" error.

store/index.js

export const mutations = {
    initialiseStore(state) {
      // Check if the ID exists
      if (localStorage.getItem('ropapp')) {
        // Replace the state object with the stored item
        this.replaceState(
          Object.assign(state, JSON.parse(localStorage.getItem('ropapp')))
        )
      }
    },
}

pages/index.vue

beforeCreate() {
  console.log('Home: beforeCreate')
  console.log('Store: ', this.$store)
  this.$store.commit('initialiseStore')
}

[vishytk]

changed my code to:

plugins/persistedstate.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'applocal',
    storage: window.localStorage,
    overwrite: true,
  })(store)
}

removed store.index.js initialiseStore() mutation

Now, I am able to see data restored in Vuex when page is reloaded. But I am unable to access it from my pages.