前端 vue單頁面應用刷新網頁後vuex的state數據丟失的解決方案（轉載）

最近接手了一個項目，前端後端都要作，以前一直在作服務端的語言、框架和環境，前端啥都不會啊。

忽然須要前端編程，兩天速成了JS和VUE框架，惋惜仍是個半吊子。而後遇到了一個困擾了一成天的問題。一直調試都沒辦法解決。

最後找到一個極好的解決思路解決了問題。https://blog.csdn.net/guzhao593/article/details/81435342

 

遇到的問題：

因爲vue框架設計出來的APP實際上所有設置在同一個html上，跳轉是經過路由實現的，

因此，有的控件並不會在跳轉時刷新，若是有數據存放在session中，沒辦法保證沒有刷新的控件能及時更新屬性值。除非手動F5。

vuex的的做用就是設置一個store，來管理這些須要動態更新的數據。

控件經過computed的綁定，能夠保證在store中的數據更新後，控件上對應的數據及時更新。

可是，store的數據是保存在內存中的，當手動F5時，頁面會從新加載vue實例，store的數據就所有恢復初始值了，這樣就會出現數據丟失的問題。

 

 

解決思路：

將state裏的數據保存一份到本地存儲(localStorage、sessionStorage、cookie）中，刷新後從新從本地存儲中讀取出來，恢復現場。

 

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

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

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

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

我選擇的是sessionStorage,選擇的緣由vue是單頁面應用，操做都是在一個頁面跳轉路由，另外一個緣由是sessionStorage能夠保證打開頁面時sessionStorage的數據爲空，而若是是localStorage則會讀取上一次打開頁面的數據。

由於咱們是隻有在刷新頁面時纔會丟失store裏的數據，那咱們能夠在點擊頁面刷新時先將state數據保存到sessionStorage,而後才真正刷新頁面。

beforeunload這個事件在頁面刷新時先觸發的。咱們把這個事件放在app.vue這個入口組件中，這樣就能夠保證每次刷新頁面均可以觸發。

具體的代碼以下：

created() {
    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));
    });
  }