In Vue single-page application, if you click refresh on a specific page of a specific route, the status information of the page may be lost after the refresh. What should be done at this point? If you are wondering, this article may help you

A, problem,

Now there is a requirement on the product that a single page application should go to a specific page and then hit Refresh, and the refreshed page should be the same as the original page.

At this point we need to save the state of the page before the refresh.

2. A solution

In this Vue single page application, wang er uses Vuex as state management. At the beginning, wang er’s idea is to synchronize the data in Vuex to localStorage.

The localstorage. setItem method is triggered as soon as the vuex data is changed.

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

function storeLocalStore (state) {
    window.localStorage.setItem("userMsg".JSON.stringify(state));
}

export default new Vuex.Store({
    state: {
        username: "Two".schedulename: "Title".scheduleid: 0,},mutations: {
        storeUsername (state,name) {
            state.username = name
            storeLocalStore (state)
        },
        storeSchedulename (state,name) {
            state.schedulename = name
            storeLocalStore (state)
        },
        storeScheduleid (state,id) {
            state.scheduleid = Number(id)
            storeLocalStore (state)
        },
    }
})
Copy the code

When the page is loaded, the data is fetched from localStorage and added to vuex. Therefore, Wang er writes the following code in app. vue created hook function:

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));

// There is no userMsg in localStorage when the project is first loaded
Copy the code

So we can solve the problem satisfactorily.

Third, another solution

The above solution is not performance-friendly because the localstorage.setitem method is triggered frequently. In addition, if the data in VUex has been synchronized to localStorage, we can directly use localStorage for state management, it seems that there is no need to use Vuex.

At this time wang er thought, if there is a way to listen to the page refresh event, and then in that listening method Vuex data stored in localStorage, that how good.

Fortunately, there is such a listener. We can use beforeUnload to do this, so we write the following code in app. vue’s Created hook function:

    // Read the status information in localStorage when the page is loaded
    localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
    
    // Save vuex information to localStorage when the page is refreshed
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg".JSON.stringify(this.$store.state))
    })
Copy the code

In this case, it seems to be perfect.

Added on 27 March 2018:

When using the above method, Wang Er encountered a problem, that is: in the development stage, if a new field is added to Vuex, the new field cannot be saved to localStorage, so the above code is modified as follows:

    // Read the status information in localStorage when the page is loaded
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    // Save vuex information to localStorage when the page is refreshed
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg".JSON.stringify(this.$store.state))
    })
Copy the code

Original address: Wang Yulue’s personal website