為什麼要監聽storage的變化？

當我們在使用vue的時候，有時候需要一個兩個資料在全域性共享，vue雖然提供了vuex模組來解決此問題，但是為了一兩個資料的共享引入vuex未免小題大做，所以我們選擇使用storage來儲存共享資料，但有個問題就是如何監聽storage的變化，讓我們可以在儲存資料的同時，在另外一個路由中監聽到變化並執行操作本例子就是演示此方法

完整示例

怎麼監聽

1. 首先在main.js中給Vue.protorype註冊一個全域性方法，

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

       // 建立一個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);
   }
}
 

其中，我們約定好了想要監聽的sessionStorage的key值為’watchStorage’，然後建立一個StorageEvent方法，當我在執行sessionStorage.setItem(k, val)這句話的時候，初始化事件，並派發事件。

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

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

3. 如何監聽 如果在另外一個路由(比如路由B)中，我們想根據watchStorage的變化來請求介面重新整理頁面資料的時候，可以在這個路由中created鉤子函式中監聽：

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

完整的示例點選此處