vue中本地儲存也可以實時監聽

網上看到的這個方法 在項目里使用了 賊爽啊，分享下

比如 在同一個頁面里邊 不同位置  兩個變量的呈現都是使用的本地儲存且一個變量修改，第二個變量也要實時變化 在正常情況下 修改一個的值后儲存起來 在不刷新頁面的情況下 另一個是不會變化的，所以就要用到本地儲存的實時刷新

1. 現在main.js中注冊全局方法，比如要監聽的本地儲存key值為‘changeData’

Vue.prototype.resetSetItem = function (key, newVal) {
   if (key === 'changData') {

       // 創建一個StorageEvent事件
       var newStorageEvent = document.createEvent('StorageEvent');
       const storage = {
           setItem: function (k, val) {
               sessionStorage.setItem(k, val);

               // 初始化創建的事件
               newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

               // 派發對象
               window.dispatchEvent(newStorageEvent)
           }
       }
       return storage.setItem(key, newVal);
   }
}

2 如何觸發
在一個路由(比如路由A)存儲值得時候，使用下面的方法：

this.resetSetItem('changeData', this.value);

3、如何監聽
如果在另外一個路由(比如路由B)中，我們想根據changeData的變化來請求接口刷新頁面數據的時候，可以在這個路由中created鈎子函數中監聽

window.addEventListener('setItem', ()=> {
    this.newVal = sessionStorage.getItem('changeData');
})