Solve Vuex refresh reset, close window reset

Posted May 27, 20203 min read

Vuex combined with sessionStorage to store common user information

Foreword

In a system, we often use the user's user name, user's mobile phone number, user ID and other information, you can use them to display in the system or obtain permissions based on ID and the like.

Because each page needs these public information, of course, it is stored in the store's status word. After logging in, it requests remote data and assigns it.

However, because Vue is responsive, once the status word stored in the store is refreshed or the window is closed, the web page will be initialized and reset, so we have to find a way to dynamically update the store data.

Question 1:The data in the page store will be reset every time the page is refreshed

method one:

We need to know that every time the page is refreshed and loaded, the entry html file will be loaded once(usually App.vue file, jump between pages will not reload drops).
So you can put the method of getting the information interface(GetPcMallInfo) in App.vue, request the interface once after refreshing, and reassign the data in the store

<template>
    <div id = "app">
        <router-view />
    </div>
</template>
<script>
    export default {
        name:'App',
        created() {
            this. $store.dispatch('GetPcMallInfo', {}). then(() => {}). catch((e) => {})
        }
    }
</script>

Disadvantages:Requesting data remotely, if the network is delayed, the data update in the store will also be delayed, then the data such as the user name displayed on the page will also be delayed, which greatly affects the customer experience; The amount of data is too large, and frequent data requests are also a performance loss.

Method Two:

  1. First, of course, after logging in, first request the interface and store the public data in the store,

  2. Secondly, refresh the page and store the store data in sessionStorage.
    Of course, it is still written in the entry html, App.vue file.

     window.addEventListener('beforeunload',() => {
         sessionStorage.setItem('store', JSON.stringify(this. $store.state))
     })
  3. Finally, after refreshing, assign the value in sessionStorage to the store. Because sessionStorage is local storage, there is no need for remote requests, so there will be no delay.

     if(sessionStorage.getItem('store')) {
         this. $store.replaceState(Object.assign({}, this. $store.state, JSON.parse(sessionStorage.getItem('store')))))
     }

Question two:when using method two, close the window, sessionStorage will be cleared

At this time, although the window is closed, but the browser is not closed, the web page is reopened, it is still in the login state, but the sessionStorage will be cleared, then the status in the store is gone.

There are also two ways to solve this problem:

  1. Instead of storing the value of the store with sessionStorage, use localStorage. Closing the current window or browser may not clear localStorage. However, every time you open a web page, the public information of the last login is retained. For example, the last time user A logged in, user B could see user A's information in localStorage.
  2. If there is login information, but the value of sessionStorage is empty, re-request the GetPcMallInfo method once. What else do you want!

Final version

  1. localStorage

     <template>
         <div id = "app">
             <router-view />
         </div>
     </template>
     <script>
         //entrance component
         export default {
             name:'App',
             created() {
                 if(window.localStorage.getItem('store')) {
                     this. $store.replaceState(Object.assign({}, this. $store.state, JSON.parse(window.localStorage.getItem('store')))))
                 }
                 window.addEventListener('beforeunload',() => {
                     window.localStorage.setItem('store', JSON.stringify(this. $store.state))
                 })
             },
         }
     </script>
  2. Re-request

     <template>
         <div id = "app">
             <router-view />
         </div>
     </template>
     <script>
     import {getToken} from '@/utils/auth'
         //entrance component
         export default {
             name:'App',
             created() {
    
                 if(this. $store.getters.MallName == '' && getToken()) {
                     this. $store.dispatch('GetPcMallInfo', {}). then(() => {}). catch((e) => {})
                 }
                 if(sessionStorage.getItem('store')) {
                     this. $store.replaceState(Object.assign({}, this. $store.state, JSON.parse(sessionStorage.getItem('store')))))
                 }
                 window.addEventListener('beforeunload',() => {
                     sessionStorage.setItem('store', JSON.stringify(this. $store.state))
                 })
             },
         }
     </script>

Question three:what should I do if I close the browser

This. . . . . . . do not ask

Are you learning today?