After Vuex refresh data loss Typescript

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

 
 
import { UserModule } from '@/store/modules/user'
 
export default {
  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

 

 

 

Guess you like

Origin www.cnblogs.com/tiandi0808/p/11945694.html