重新整理頁面導緻vuex資料丢失的解決辦法

問題

使用vuex統一管理項目狀态時，如若重新整理頁面，會導緻存在vuex的資料丢失

原因

js代碼是運作在記憶體中的，代碼運作時的所有變量、函數也都是儲存在記憶體中的。進行重新整理頁面的操作，以前申請的記憶體被釋放，重新加載腳本代碼，變量重新指派，是以這些資料要想存儲就必須存儲在外部，例如：Local Storage、Session Storage、Index DB等。這些都是浏覽器提供的API，讓你可以将資料存儲在硬碟上，做持久化存儲。具體選擇哪一個就根據你實際需求來選擇。

解決方法：

1. 在全局app.vue中加入以下代碼

export default {
  name: 'App',
  created () {
    if (sessionStorage.getItem("store") ) {   //頁面加載前讀取sessionStorage裡的狀态資訊
　　    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    window.addEventListener("beforeunload",()=>{   //在頁面重新整理前将vuex裡的資訊儲存到sessionStorage裡
　　    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
           

1. 在vuex中

const state = {
  userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{}
};
const mutations = {
  SET_USERINFO(state,userInfo){
    sessionStorage.setItem(`userInfo`,userInfo)
    state.userInfo=userInfo;
},
const actions = {
  updateUserInfo(context,value){
    context.commit('SET_USERINFO',value)
  }
}