Nuxt.js vuex store not persisted

by

Alright, so the behavior is totally logic. Vuex is not supposed to be persistent.

For any persistence on the front-end, you need either:

  • cookies
  • localStorage
  • pass it in the URL (query params)
  • IndexedDB
  • get the data back from making a call to a backend

Some of the packages here may be useful: https://github.com/vuejs/awesome-vue#persistence

If you reload your page with an F5, all your JS will be wiped and loaded again. Hence, no state will be kept since it will be a brand new page. When working with frontend frameworks, you cannot expect it to just work after a page refresh.

Same go when you do follow an href, it is an actual real navigation. What you need to do, is to use a <nuxt-link></nuxt-link> component, with something like to="/profile" to let VueJS move to this URL.

NuxtLink is a Nuxt.js component and essentially a component on top of <router-link></router-link>, which is Vue router.

TLDR: you cannot use things like window.location.href, nor <a href="...". You may use the given components by either Nuxt (nuxt-link) or Vue’s router (router-link), if you’re using VueJS only.

Giving a read to the Vue router’s documentation may be a good start to understand things a bit more !

If you’re using nuxt/auth, give a try to that one: https://auth.nuxtjs.org/api/storage/#universal-storage

More Related Contents:

  1. Vuex – Do not mutate vuex store state outside mutation handlers
  2. how to make a maximum 1MB upload image?
  3. Vuex state on page refresh
  4. How to make a dynamic import in Nuxt?
  5. this.$auth.loggedIn returning false
  6. VueJS access child component’s data from parent
  7. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  8. Vuex Action vs Mutations
  9. How to have list + details pages based on API fetched content
  10. Vue: wait to render until all components are mounted
  11. How to setup SASS/SCSS/sass-loader in Nuxt
  12. How to make dynamic routes on the vue router?
  13. How to access Vuex module getters and mutations?
  14. How to use microfrontends with Vue/Nuxt?
  15. Vuex – Computed property “name” was assigned to but it has no setter
  16. How to deploy Laravel/Lumen Framework to the production server [closed]
  17. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  18. Communication between sibling components in Vue.js 2.0
  19. Vue Router return 404 when revisit to the url
  20. use axios globally in all my components vue
  21. How to use any icons with Nuxt3?
  22. Pass data from child to parent in Vuejs (is it so complicated?)
  23. How to use any icons with Nuxt or Vue?
  24. What is nextTick and what does it do in Vue.js?
  25. “export ‘default’ (imported as ‘Vue’) was not found in ‘vue’
  26. Difference between v-model and v-bind on Vue.js?
  27. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  28. When should I use Vuex?
  29. How to access remote data and write it into a file during Nuxt build?
  30. Passing props to Vue.js components instantiated by Vue-router

Leave a Comment