最近需求不是很大，整體下項目中需要注意的地方

前言：

在使用vuex store做數據狀態儲存的時候，頁面刷新之后，store數據丟失，導致用戶狀態、token失效等一系列問題

原因：

JS代碼是運行在內存中的，代碼運行時的所有變量、函數也都是保存在內存中的。進行刷新頁面的操作，以前JS的內存被釋放，重新加載腳本代碼，變量重新賦值，所以這些數據要想存儲就必須存儲在外部

解決思路：

在用戶登錄之后，可以獲取當前用戶的信息或者登錄態，然后在存儲store數據的同時，再存儲到localStorage中；vuex的變量是響應式的，而localStorage的數據變量不是；當改變vuex變量時；組件是回自動監測到數據的改變，而localStorage不會，除非你去操作localStorage的數據；so...應讓vuex中的狀態從sessionStorage中得到，這樣組件就可以響應式的變化

補充說明：

在客戶端存儲數據：HTML5提供了2種在客戶端存儲數據的新方法：localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限。
之前，這些都是由cookie完成的，但是cookie不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得cookie速度很慢，而且效率不高。
也可以用ES6的Proxy方式或者用store.subscribe的方式；以上兩種方式有利有弊；參考下

代碼如下

1）vuex store代碼

import Vue from 'vue'
import Vuex from 'vuex'
import Storage from '@/uitl/Storagehandle'
Vue.use(Vuex)
console.log(Storage)
const state = {
    //校驗token
    token: Storage.getItem("token")||"",
    //用戶信息
    userData: Storage.getItem("userData") || {}
}
const mutations ={
    //賦值token
    tokenFix (state, token) { 
        Storage.setItem(`token`, token)
        state.token = token
    },
    //賦值用戶信息
    userDataFix (state, userData) { 
        Storage.setItem(`userData`, userData)
        state.userData = userData
    },
}
const actions = {
    //提交修token
    updatetoken (context,value) { 
        context.commit('token',value)
    },
    //提交修改用戶信息
    updateuserData (context,value) { 
        context.commit('userData',value)
    }
}
const getters = {}
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

export default store

注：Storagehandle 作用是操作localStorage的一些函數，寫長長的一堆比較煩；代碼如下：

const lsa = window.localStorage
export default {
    getItem(key) {
      try {
        return JSON.parse(lsa.getItem(key))
      } catch (err) {
        return null
      }
    },
    setItem(key, val) {
      lsa.setItem(key, JSON.stringify(val))
    },
    clear() {
      lsa.clear()
    },
    keys() {
      return lsa.keys()
    },
    removeItem(key) {
      lsa.removeItem(key)
    }
  }

在vue組件中:

<template>
  <div class="header">
      <span class="el-dropdown-link">
          歡迎，{{user.user_name}}
     </span>
         
  </div>
</template>
<script>
import {mapState} from 'vuex'
  export default {
    data() {
      return {
      };
    },
    created(){
    },
    computed:{
      ...mapState({
          user:state => state.userData
        })
    },
    methods: {
     
    }
  }
</script>