vue store的值刷新就被覆蓋解決方案

《轉》最近在用vue寫pc端項目，用vuex來做全局的狀態管理， 發現當刷新網頁后，保存在vuex實例store里的數據會丟失。

1. 產生原因
2. 解決思路
3. 解決過程
1. 產生原因
其實很簡單，因為store里的數據是保存在運行內存中的,當頁面刷新時，頁面會重新加載vue實例，store里面的數據就會被重新賦值。

2. 解決思路
一種是state里的數據全部是通過請求來觸發action或mutation來改變

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

很顯然，第一種方案基本不可行，除非項目很小或者vuex存儲的數據很少。而第二種可以保證刷新頁面數據不丟失且易於讀取。

3. 解決過程
首先得選擇合適的客戶端存儲

localStorage是永久存儲在本地，除非你主動去刪除;

sessionStorage是存儲到當前頁面關閉為止;

cookie則根據你設置的有效時間來存儲，但缺點是不能儲存大數據且不易讀取。

我選擇的是sessionStorage,選擇的原因vue是單頁面應用，操作都是在一個頁面跳轉路由，另一個原因是sessionStorage可以保證打開頁面時sessionStorage的數據為空，而如果是localStorage則會讀取上一次打開頁面的數據。

然后是怎么用sessionStorage來保存state里的數據。

第一種方案

由於state里的數據是響應式，所以sessionStorage存儲也要跟隨變化。又由於vuex規定所有state里數據必須通過mutation方法來修改，所以第一種方案就是mutation修改state的同時修改sessionStorage對應存儲的屬性

第二種方案

第一種方案確實可以解決問題，但這種方法很明顯讓人覺得怪異，都這樣了，那不如直接用sessionStorage來做狀態管理。

那怎么才能不用每次修改state時同時也要修改sessionStorage呢？這時我們可以換一個思路，因為我們是只有在刷新頁面時才會丟失state里的數據，那有沒有辦法在點擊頁面刷新時先將state數據保存到sessionStorage,然后才真正刷新頁面?

當然有，beforeunload這個事件在頁面刷新時先觸發的。那這個事件應該在哪里觸發呢？我們總不能每個頁面都監聽這個事件，所以我選擇放在app.vue這個入口組件中，這樣就可以保證每次刷新頁面都可以觸發。

具體的代碼如下：

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))
})
}
}

 

————————————————
版權聲明：本文為CSDN博主「趙天明」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/guzhao593/article/details/81435342