About two vuex page refresh problem Solutions

1: Set state to null, and then add the corresponding control sessionStorage inside getters, to add the corresponding control sessionStorage inside mutations, such as:

let _store = {
  state: {
    appType: null
  },
  getters: {
    appType(state){
        if(!state.appType) {
          state.appType = getSessionStorage("appType")
        }
        return state.appType
    }
  },
  mutations: {
    setAppType (state, appType) {
       state.appType = appType
       setSessionStorage("appType",appType)
    }
  }
};

　　Disadvantages: state must be set to null, and must be added to each control sessionStorage getters, cumbersome

 

2: when the page initialization, remove all of the values ​​stored in sessionStorage inside, but before the page is refreshed, all the state saved inside sessionStorage

// read status information in sessionStorage when the page is loaded 
IF (sessionStorage.getItem ( "Store" )) {
     the this . $ Store.replaceState (Object.assign ({},     
     the this . $ Store.state, the JSON.parse ( sessionStorage.getItem ( "Store" )))) 
} 

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

 

Disadvantage: beforeunload mobile terminal compatibility issues