vuex狀態刷新網頁時數據被清空問題如何解決

這篇文章主要介紹“vuex狀態刷新網頁時數據被清空問題如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vuex狀態刷新網頁時數據被清空問題如何解決”文章能幫助大家解決問題。

vuex狀態刷新網頁時數據被清空

vuex狀態管理，在網頁刷新數據被清空的解決方法。

在main.js中寫入下面的代碼段（親測有效）

//刷新保存狀態
if (sessionStorage.getItem("store")) {
    store.replaceState(
        Object.assign(
            {},
            store.state,
            JSON.parse(sessionStorage.getItem("store"))
        )
    );
    sessionStorage.removeItem("store")
}

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

vuex狀態在頁面刷新時,會清空狀態

store寫入的state在頁面刷新時會被清空，這時可以用sessionStorage緩存狀態。因為localStorage會永久保存數據，只有用戶手動清除的時候才會清除。cookie存儲內存只有4k,并且始終在同源的http請求中攜帶。而sessionStorage在關閉瀏覽器頁面時就會清空。

因為狀態只會在刷新頁面的時候清空，所以我們只需要去app.vue里面在頁面刷新之前把store保存在sessionStorage里面。在頁面加載時讀取sessionStorage的值

由于瀏覽器存儲時會自動把對象轉換成字符串格式，且不具備轉換對象的鍵和值為字符串的效果，只會轉換為[object,object]。因此需要先將對象轉換為json字符串存儲，取出時再使用JSON.parse()方法轉換為json對象。

app.vue

created () {
    // 在頁面加載時讀取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在頁面刷新時將store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }

關于“vuex狀態刷新網頁時數據被清空問題如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。