CODEWITHSUNDEEP
javascriptvue.jsvuexnuxt.jspersistent-storage
Fenix
Fenix

Reputation: 1579

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

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.

Upvotes: 0

Views: 673

Answers (1)

ElZebu
ElZebu

Reputation: 19

I ran into the same issue. I fixed it using this.$nextTick() instead of setTimeout(). I think it's a bit cleaner.

Upvotes: 1

Related Questions