1、首先在main.js中給Vue.protorype注冊一個全局方法,其中,我們約定好了想要監聽的sessionStorage的key值為’watchStorage’,然後建立一個StorageEvent方法,當我在執行sessionStorage.setItem(k, val)這句話的時候,初始化事件,并派發事件。
!
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);
}
}
2、如何觸發
在一個路由(比如路由A)存儲值得時候,使用下面的方法:
this.resetSetItem('watchStorage', this.value);
3、如何監聽
如果在另外一個路由(比如路由B)中,我們想根據watchStorage的變化來請求接口重新整理頁面資料的時候,可以在這個路由中created鈎子函數中監聽:
window.addEventListener('setItem', ()=> {
this.newVal = sessionStorage.getItem('watchStorage');
})
轉載于:https://www.cnblogs.com/scale/p/10973069.html