vue刷新vuex數據丟失

問題描述

頁面刷新，其他頁面保存的vuex全局數據消失，導致本頁面顯示異常

原因分析

因爲store裏的數據是保存在運行內存中的,當頁面刷新時，頁面會重新加載vue實例，store裏面的數據就會被重新賦值

解決方案

將state裏的數據保存一份到本地存儲(localStorage、sessionStorage、cookie）中

1. localStorage永久存儲在本地，除非主動刪除;
2. sessionStorage存儲到當前頁面關閉爲止;
3. cookie則根據設置的有效時間來存儲，缺點是不能儲存大數據且不易讀取。

更傾向於選擇sessionStorage,原因:

1. vue是單頁面應用，操作都是在一個頁面跳轉路由;
2. sessionStorage可以保證打開頁面時sessionStorage的數據爲空，如果是localStorage則會讀取上一次打開頁面的數據。

//state
classOptions:JSON.parse(sessionStorage.getItem('classOptions'))||[],
//mutations
updateClassOptions(state,payload) {
  state.classOptions=payload
 },
//actions
getClassInfo({state,commit}) {
    return new Promise((resolve)=>{
      axios.post(classesUrl).then((res) => {
        let data=res.data
        commit('updateClassOptions', data)
        sessionStorage.setItem("classOptions",JSON.stringify(state.classOptions))
      }).catch((err) => {
        console.log(err)
      })
    })
  },

另一種解決方案，將所有state保存在sessionStorage

在點擊頁面刷新時先將state數據保存到sessionStorage

export default {
  name: 'App',
  created () {
    //在頁面加載時讀取sessionStorage裏的狀態信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在頁面刷新時將vuex裏的信息保存到sessionStorage裏
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}