問題：

頁面如果被F5強制重新整理了，那麼store.state裡的內容就會被清空。這顯然不是我們所希望看到的。

結合localStorage快取可以解決該問題。

在main.js中繫結下頁面重新整理事件，如果有重新整理事件，則把store.state內容存入快取。

然後在root.vue的create方法中去重新載入。具體程式碼如下：

1.工具程式碼

setObj: function (key, obj) {
    obj = JSON.stringify(obj);
    localStorage.setItem(key, obj);
  },
  getObj: function (key) {
    var obj = JSON.parse(localStorage.getItem(key));
    return obj;
  },
 

2.在main.js中寫重新整理繫結事件

window.addEventListener("beforeunload",()=>{
  console.log('refresh');
  ctool.setObj('store',store.state);
})

程式碼直接寫在new Vue下面即可。

3.在root.vue的create方法中寫恢復程式碼

created() {
      if(ctool.getObj('store')){
        this.$store.replaceState(Object.assign({}, this.$store.state,ctool.getObj('store')));
        ctool.setObj('store',null);
      }
}
 

這裡為了避免出現異常錯誤，在恢復快取後，置空快取。