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

[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.