vue deal with common problems - when the page is refreshed, how to maintain state information in the original vuex

First, when the page is refreshed, how to maintain state information in the original vuex

　　After the page refreshes, the original vuex the state will change, if before the page refreshes, you can save state information, when the page reloads, and then assign the value to state, then the problem can be solved.

1、localstorage

　　Localstorage can be used to store information.

[Add the following function in a hook component. In such App.vue] 
Created () { 
    // read status information in localStorage when the page is loaded 
    IF (localStorage.getItem ( "Store")) { 
        the this. $ Store.replaceState (Object.assign ({}, the this . $ store.state, JSON.parse (localStorage.getItem ( "Store")))) 
    } 

    // when the page will refresh save vuex inside information to localStorage in 
    window.addEventListener ( "beforeunload", () => { 
        localStorage.setItem (. "store", the JSON.stringify (store.state the this $)) 
    }) 
} 


Note: 
    . $ store.replaceState the this () to store the replacement information (combined state). 
    Object.assign (target, ... source) is assigned the value of source target, if duplicate data is overwritten. ... which represents more source. 
    JSON.stringify () for an object into JSON 
    JSON.parse () is used to turn JSON objects

Note:
　　If there are two components, when the value of the call localstorage, problems may arise.
　　As shown below, Main.vue in each time you refresh the page will trigger localstorage operation.
　　After the start localstorage no value, a user enters Main.vue by Login.vue component assembly and refresh the page, localStorage will record the current state of information relevant to the user.
　　Switching to a direct path Login.vue browser. When another user via Login.vue and into Main.vue, at this time is to get information on a user, so that there will be problems (I encountered a pit, roughly meaning so).

 

 

A Solutions violence directly on a user to delete cached information in Login.vue in. 
At this point there is no information on localStorage users. 
[Login.vue] 
Created () { 
    // before entering the screen, removing the home page saved state information 
    localStorage.removeItem ( "Store") 
} 

and then only when the information is recorded localStorage Main component refreshed. 
[] Main.vue 
the Created () { 
    // read in localStorage status information when the page loads 
    IF (localStorage.getItem ( "Store")) { 
        the this. $ Store.replaceState (Object.assign ({}, the this. store.state $, JSON.parse (localStorage.getItem ( "Store")))) 
    } 

    // when the page will refresh save vuex inside information to localStorage in 
    window.addEventListener ( "beforeunload", () => { 
        localStorage .setItem ( "Store", the JSON.stringify (the this. $ store.state)) 
    }) 
}

 

2、sessionStorage

　　SessionStorage can also be used to store information.

[Add the following function in a hook component. In such App.vue] 
Created () { 
    // read status information in sessionStorage when the page is loaded 
    IF (sessionStorage.getItem ( "Store")) { 
        the this. $ Store.replaceState (Object.assign ({}, the this . $ store.state, JSON.parse (sessionStorage.getItem ( "Store")))) 
    } 

    // when the page will refresh the information in to save vuex sessionStorage in 
    window.addEventListener ( "beforeunload", () => { 
        sessionStorage.setItem ( "Store", the JSON.stringify (the this. $ store.state)) 
    }) 
}

 

3, with the difference localstorage of sessionStorage

(1) localstorage sessionStorage both client and for storing data.
(2) localStorage no expiration time, the lifecycle sessionStorage is the life cycle of the browser.
(3) When the browser is closed, the sessionStorage data will be cleared, but they do not localStorage data through code or manually delete deliberately deleted, saved permanently.
(4) To remove the data localstorage.

localStorage.removeItem (key) to clear a data 
localStorage.clear () Clear all data