<>1. Problem description
Generally, when the login is successful, the user information needs to be transferred , Menu information placement vuex in , Shared data as global . But when the page is refreshed vuex The data in will be reinitialized , Cause data loss . because vuex The data in is stored in the running memory , When the page refreshes , The page will reload vue example ,vuex The data inside will be cleared .
I'm in a component （ For example, the login component page ） After logging in , How do other pages capture and respond to this change , To respond to data changes by calculating attributes ,mapGetters obtain vuex
computed: { ...mapGetters(['blogUser']) },
But after refreshing the page, the data is lost !!
<>2. Solutions ：
Method 1 ： take vuex The data in is saved directly to the browser cache （sessionStorage,localStorage,cookie）
Method 2 ： Request remote data again when the page is refreshed , Make it dynamic update vuex data
Method 3 ： Request remote data in the background on the parent page , And before the page is refreshed, the vuex Save your data to sessionStorage（ In case the amount of requested data is too large, the returned data cannot be obtained when the page is loaded ）
Because I access less data, so through a solution ：
stay App.vue Add the following code to the
//=========================== The following is to solve the problem of refresh page loss vuex data created() {
// Read on page load sessionStorage Status information in if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state,
JSON.parse(sessionStorage.getItem('store')))); }
// When the page is refreshed, the vuex Save the information in the sessionStorage in window.addEventListener('beforeunload', ()
=> { sessionStorage.setItem('store', JSON.stringify(this.$store.state)); }); }
Technology