上傳頭像后導航欄中頭像同步(Vue中監聽sessionStorage)
今天做項目的時候做到修改頭像,修改頭像后導航右側也會同步更新,如圖:
于是需要做全局監聽,如下:
基本步驟：
1. 封裝全局監聽方法：在main.js中給Vue.protorype注冊全局方法。約定監聽的sessionStorage的值為"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. 觸發，并將監聽的值存入Storage。例如在某個路由中需要將某個值作為監聽的值，則在該路由下的調用該方法。
this.resetSetItem('watchStorage', value); //value就是你要存入的值
3. 監聽，如果在另一個路由下需要根據watchStorage的值變化來刷新請求的頁面數據時，可以在這個路由下的created鉤子函數中監聽。
window.addEventListener('setItem', ()=> { //這里就可以根據具體情況調用或刷新需要的操作 this.newVal = sessionStorage.getItem('watchStorage'); //獲取監聽的值 })
浙公網安備 33010602011771號