Vuex is a state management mode developed specifically for vuue.js applications. It uses a centralized management store to manage the state of all components of the application. However, when the page is refreshed, the data saved in the Vuex instance Store is lost.

Here’s why:

Because the store data is stored in runtime memory, when the page is refreshed, the page reloads the Vue instance and the store data is reassigned and initialized. ##### Solution:

Method one:

The state of the data stored in localstorage and sessionstorage or cookies.

  • Store data to sessionStorage before page refresh using beforeUnload event which fires before page refresh:

    • In app.vue created method read sessionStorage data stored in store, then use vuex.store.replaceState method, replace the store root state
    • Store. State to sessionStorage in the beforeUnload method. The code is as follows:
export default {
  name: 'App',
  created () {
    // Read the status information in sessionStorage during page loading
    if (sessionStorage.getItem("state")) {this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("state"))))}// Save vuex information to sessionStorage during page refresh
    window.addEventListener("beforeunload",()=> { sessionStorage.setItem("state".JSON.stringify(this.$store.state))
    })
  }
Copy the code

The difference between localStorage and sessionStorage, cookies:

  • localStorage:localStorageThe life cycle is permanent, after the page or browser is closedlocalStorageAnd the data won’t disappear.localStorageData will never disappear unless it is actively deleted.
  • sessionStorage:sessionStorageIs valid only for the current session.sessionStorageIntroduced the concept of a “browser window,”sessionStorageIs data that is always present in the same-origin window. As long as the browser window is not closed, the data remains even if the page is refreshed or another page is entered. butsessionStorageIt is destroyed after the browser window is closed. Simultaneously open the same window and page independently,sessionStorageIt’s different.
  • cookie:cookieThe lifetime is set onlycookieIt remains valid until expiration time, even if the window or browser is closed. The data size is4KThere is a limit on the number (different browsers), generally cannot exceed20A. The disadvantage is that it cannot store big data and is not easy to read.

Method 2:

With Vuex-PersistedState, automatic storage is available.

  • Download:
npm install --save vuex-persistedstate
Copy the code
  • use
Introduced in store.jsimport createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

  / / configuration
  plugins: [createPersistedState()]
})
Copy the code

SessionStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage: localStorage

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

  / / configuration
  plugins: [createPersistedState({
   storage: window.sessionStorage
  })]
})
Copy the code