vue項目中監聽sessionStorage值發生變化

首先在main.js中給Vue.protorype注冊一個全局方法，

其中，我們約定好了想要監聽的sessionStorage的key值為’watchStorage’，

然后創建一個StorageEvent方法，當我在執行sessionStorage.setItem(k, val)這句話的時候，初始化事件，並派發事件。

 1 Vue.prototype.resetSetItem = function (key, newVal) {
 2    if (key === 'watchStorage') {
 3 
 4        // 創建一個StorageEvent事件
 5        var newStorageEvent = document.createEvent('StorageEvent');
 6        const storage = {
 7            setItem: function (k, val) {
 8                sessionStorage.setItem(k, val);
 9 
10                // 初始化創建的事件
11                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
12 
13                // 派發對象
14                window.dispatchEvent(newStorageEvent)
15            }
16        }
17        return storage.setItem(key, newVal);
18    }
19 }

1 如何觸發
2 在一個路由(比如路由A)存儲值得時候，使用下面的方法：
3 this.resetSetItem('watchStorage', 11111);

1 如何監聽
2 如果在另外一個路由(比如路由B)中，我們想根據watchStorage的變化來請求接口刷新頁面數據的時候，可以在這個路由中created鈎子函數中監聽：
3 window.addEventListener('setItem', ()=> {
4     this.newVal = sessionStorage.getItem('watchStorage');
5 })
6 ————————————————