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 
原文：https://blog.csdn.net/guzhao593/article/details/81435342 
版權宣告：本文為博主原創文章，轉載請附上博文連結！