Vuex state on page refresh

by

This is a known use case. There are different solutions.

For example, one can use vuex-persistedstate. This is a plugin for vuex to handle and store state between page refreshes.

Sample code:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

What we do here is simple:

  1. you need to install js-cookie
  2. on getState we try to load saved state from Cookies
  3. on setState we save our state to Cookies

Docs and installation instructions: https://www.npmjs.com/package/vuex-persistedstate

More Related Contents:

  1. Communication between sibling components in Vue.js 2.0
  2. How to watch store values from vuex?
  3. Accessing Vuex state when defining Vue-Router routes
  4. When should I use Vuex?
  5. Vue.js dynamic images not working
  6. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  7. Vuejs and Vue.set(), update array
  8. [Vue warn]: Property or method is not defined on the instance but referenced during render
  9. NavigationDuplicated Navigating to current location (“/search”) is not allowed
  10. How to call function on child component on parent events
  11. How to listen for ‘props’ changes
  12. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  13. Vue.js: Conditional class style binding
  14. Is there any way to ‘watch’ for localstorage in Vuejs?
  15. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  16. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  17. Access vue instance/data inside filter method
  18. Vue v-on:click does not work on component
  19. Methods vs Computed in Vue
  20. Passing props with programmatic navigation Vue.js
  21. Vue.js – update router view
  22. How to use Vuetify tabs with vue-router
  23. Force download GET request using axios
  24. Importing javascript file for use within vue component
  25. How to navigate using vue router from Vuex actions
  26. How to limit iteration of elements in `v-for`
  27. Detect Back Button in Navigation Guards of Vue-Router
  28. VueJS conditionally add an attribute for an element
  29. Vue.js – Add class to clicked button
  30. How to pass an object as props with vue router?

Leave a Comment