Problem Description: Vuex saved data will be lost after page refresh Clear
Problem Solution: Use sessionstorage save, save to sessionStorage when the page is refreshed the page and then fill in when loading (otherwise vuex-persistedstate plug-ins can solve this problem, I am using a typescript, using the 'vuex-module-decorators' registration vuex each module, I do not know how to use the plug-in, you have not tried, may want to try to search, many aspects of this article)
In the 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,
the JSON.parse (sessionStorage.getItem ( 'Store'))
)
)
} // save a page refresh to the information in vuex sessionStorage in
window.addEventListener ( 'beforeunload', () => {
the console.log ( 'setStore ')
sessionStorage.setItem (' Store ', the JSON.stringify (the this. $ store.state))
})
}
Many people may also do so, and I was such a deal, but it has no effect, and I do not know whether there is the same situation. Individual circumstances may differ, record it himself notes, give you a reference to it
But you can see log record is indeed carried out, but it does not have the effect, after several debugging and found the following figure the Register module during debugging: user, it seems each refresh will re-register once vuex, so I think it is not me in fact, it is assigned to vuex, but behind the registration and re-initialize the vuex that led to initialize the data has not been successful, so I just entered App.vue when he needs to import the cache vuex, found in the back of the page refreshes solved this problem