Vuex結合sessionStorage存儲公用的用户信息

前言

在一個系統中，我們經常會用到用户的用户名、用户手機號、用户ID等信息，可以將它們用於展示在系統中或者根據ID獲取權限之類。

因為各個頁面都需要這些公用信息，當然是存儲在store的狀態字中，登錄之後就請求遠程數據，賦值啦。

但是由於Vue是響應式的，我們存儲在store中的狀態字一旦刷新或者關閉窗口，網頁都會初始化，重置，所以得想個方法動態更新store數據。

問題一：每次刷新頁面store中數據都會重置

方法一：

我們需要知道，每次刷新加載一次頁面，都會加載一次入口html文件（一般都是App.vue文件，頁面間跳轉是不會重新加載滴）。
所以可以將獲取信息的接口的方法（GetPcMallInfo）放在App.vue中，一刷新就去請求一次接口，重新賦值store中的數據

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

缺點：遠程請求數據，如果網絡延遲，那麼store中的數據更新也會出現延遲的情況，那麼展示在頁面中的用户名之類的數據也會延遲渲染，非常影響客户體驗；如果數據量過大，頻繁的請求數據也是一種性能損耗。

方法二：

1. 首先，當然是在登錄之後，先請求接口，把公用數據存儲在store中，

2. 其次，在頁面刷之新，將store數據存儲在sessionStorage中。
   當然還是是還是寫在入口html，App.vue文件中啦。

   window.addEventListener('beforeunload', () => {
       sessionStorage.setItem('store', JSON.stringify(this.$store.state))
   })

3. 最後，刷新後，將sessionStorage中的值賦值給store。由於sessionStorage是本地存儲，不需要遠程請求，就不會出現延遲的情況啦。

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

問題二：使用方法二時，關閉窗口，sessionStorage會被清空

這時，雖然關閉了窗口，但是沒有關閉瀏覽器，重新打開網頁，還是處於登錄狀態，但是sessionStorage會清空，那麼store中的狀態也沒了。

這裏也有兩個方法解決：

1. 不用sessionStorage存儲store的值，用localStorage。關閉當前窗口或瀏覽器可不會清空localStorage。但是，每次打開網頁會保留上一次登錄的公共信息。比如上一次是用户A登錄，用户B能在localStorage中看到用户A的信息。
2. 如果有登錄信息，但是sessionStorage的值是空的，重新請求GetPcMallInfo方法一次唄。還想什麼呢！

終極版

1. localStorage

   <template>
       <div id="app">
           <router-view />
       </div>
   </template>
   <script>
       // 入口組件
       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. 重新請求

   <template>
       <div id="app">
           <router-view />
       </div>
   </template>
   <script>
   import {getToken} from '@/utils/auth' 
       // 入口組件
       export default {
           name: 'App',
           created() {
   
               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))
               })
               
               if(this.$store.getters.MallName==''&&getToken()){
                   this.$store.dispatch('GetPcMallInfo', {}).then(() => {}).catch((e) => {})
               }
           },
       }
   </script>

問題三：關閉瀏覽器了，怎麼辦

這。。。。。。。不要問

今天的你學廢了麼