<>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)); }); }

©2020 ioDraw All rights reserved
JavaScript study ( Scope )R Language group summation , Group average , Group count antd table sort 2021 Front end high frequency interview questions ( You have to watch it !!!)Android end Firefox Testing credit card and address auto fill function Sql What is the order of execution of ?vue+element-ui Realize the input limit of price 2021 Front end interview questions and written questions ——Vuejavascript Adding and deleting form information FastAPI to write get,post Interface , adopt json Interface for parameter transfer