Vuex: Preserve parts of the state when refreshing the browser

user_7503585 0
Viewed 2038

I’m using Vue with Vuex. I’ve got the following problem: When the user presses the “refresh button” of the browser, the state in the Vuex store is reset to its initial values. However, I want to preserve the state. More precisely, I want to preserve only parts of the state, but not the whole one.

Now I know there is a plugin called “vuex-persistedstate”. It’s this one:

https://www.npmjs.com/package/vuex-persistedstate

There is also an option to preserve only parts of the states, but I don’t know how to do it precisely. For example, if we have a look at the jsfiddle

https://jsfiddle.net/robinvdvleuten/wmf8zvf8/

there is a variable called “count”. Assume we had another variable “newCount” in the state and I want to persist only newCount, but not count. What in detail do I have to write instead of plugins: [createPersistedState()]?

Thank you very much for any help!

vuejs2 vuex page-refresh state javascript
1 Answers

You can't preserve any part of the state after a browser refresh. Why? Because it's only javascript, everything happen will be reseted after a refresh.

If you want to create persistent data, you have to store it somewhere. Several solutions:

  1. Use a remote database
  2. Create server session
  3. Store in browser local storage (vuex-persistedstate default solution)
  4. Store in cookies

Be carefull with browser storage, some users disable it, you'll have to manage privacy and security policies.

user_37595510
Related