Vuex-persistedstate: vuex state wasn't loaded in nuxtjs mounted() after hard-reload

[wiadev]

I've been building my first app in nuxtjs but I have some issues with vue state. I've integrated vuex-persistedstate and js-cookie to persist the state.

I'm trying to get the vuex state and set the values in the component inner state (data () {}).

Notification.vue

computed: {
   ...mapState({
     user: state => state.auth.user
   })
 },
mounted() {
  this.notifications = this.user.notification
}

This is working fine if I come to this page from the other page.

But if I reload the notification page directly, this.user(vuex state) is null. if I wrap it in setTimeout(), I'm getting the state correctly even after the reload the page.

for example:

mounted () {
  setTimeout(() => {
    this.notification = this.user.notification
  })
}

I believe this is async issue with vuex & nuxtjs but I don't think it's a good idea to wrap the setTimeout in all components mounted() method.

Is there any way to resolve this?

Many thanks.

[ashnamuh]

I have a similar issue. When i try to update state on Nuxt mounted, the state is updated. But persisted LocalStorage data aren't updated.

It work fine

// store actions
const actions = {
  refresh() {
    commit('SET_MY_STATE', [])
  }
}

// nuxt mounted hook
mounted() {
  setTimeout(() => {
    this.$store.dispatch('myModule/refresh') // LocalStorage is updated
  }, 0)
}

But the following don't work

// store actions
const actions = {
  refresh() {
    commit('SET_MY_STATE', [])
  }
}

// nuxt mounted hook
mounted() {
  this.$store.dispatch('myModule/refresh') // LocalStorage is not updated
}

[renzosunico]

I encountered this issue awhile back and found that onNuxtReady is executed late. In my case, my auth middleware is executed first and therefore does not recognize the login state of the user. Removed it from onNuxtReady and it works fine.

I'm not sure if there will be side effects in doing so but I'm assuming there's none since store is already available by this time.

import createPersistedState from 'vuex-persistedstate'

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

[prantaDutta]

I encountered this issue awhile back and found that onNuxtReady is executed late. In my case, my auth middleware is executed first and therefore does not recognize the login state of the user. Removed it from onNuxtReady and it works fine.

I'm not sure if there will be side effects in doing so but I'm assuming there's none since store is already available by this time.

import createPersistedState from 'vuex-persistedstate'

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

This solved the problem for me, thank you so much. Can you tell me if this encountered any problem later?

[renzosunico]

I encountered this issue awhile back and found that onNuxtReady is executed late. In my case, my auth middleware is executed first and therefore does not recognize the login state of the user. Removed it from onNuxtReady and it works fine.
I'm not sure if there will be side effects in doing so but I'm assuming there's none since store is already available by this time.

import createPersistedState from 'vuex-persistedstate'

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

This solved the problem for me, thank you so much. Can you tell me if this encountered any problem later?

Hi @prantaDutta, haven't had issues with it. It is also confirmed in this pull request that it is not necessary to have it inside onNuxtReady.

[maxmckenzie]

Removed it from onNuxtReady and it works fine.

How? how did you remove it from nuxt ready? could you provide a code snippet of what you did.