vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到

更新時(shí)間：2022年10月24日 16:46:31 作者：施玥喵

這篇文章主要介紹了vue實(shí)現(xiàn)監(jiān)聽數(shù)值的變化，并捕捉到問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

上傳頭像的例子是完整的，登錄沒全部展示

1. 封裝全局監(jiān)聽方法

在main.js中給引入watchsessionStorage（可以放多個(gè)函數(shù)）。

約定監(jiān)聽的sessionStorage的值為"dialogLogin"，“avatarUrl”，然后創(chuàng)建StorageEvent方法，當(dāng)執(zhí)行sessionStorage.setItem(k, val) 時(shí)，初始化事件，并派發(fā)事件

//用于登錄判斷是否有token
export function resetSetItem(key, newVal) {
    if (key === 'dialogLogin') {
        // 創(chuàng)建一個(gè)StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function (k, val) {
                sessionStorage.setItem(k, val);
                // 初始化創(chuàng)建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派發(fā)對象
                window.dispatchEvent(newStorageEvent)
            }
        }
        return storage.setItem(key, newVal);
    }
}
//用于上傳頭像事，頭部實(shí)時(shí)改變
export function resetSetItemAvatar(key, newVal) {
    if (key === 'avatarUrl') {
        // 創(chuàng)建一個(gè)StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function (k, val) {
                sessionStorage.setItem(k, val);
                // 初始化創(chuàng)建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派發(fā)對象
                window.dispatchEvent(newStorageEvent)
            }
        }
        return storage.setItem(key, newVal);
    }
}

2. 觸發(fā)，并將監(jiān)聽的值存入Storage

例如在某個(gè)路由中需要將某個(gè)值作為監(jiān)聽的值，則在該路由下的調(diào)用該方法。

resetSetItemAvatar('avatarUrl',res.data.avatar); 
//res.data.avatar就是你要存入的值（例子：avatar頭像）

3. 監(jiān)聽

如果在另一個(gè)路由下需要根據(jù)watchStorage的值變化來刷新請求的頁面數(shù)據(jù)時(shí)，可以在這個(gè)路由下的created鉤子函數(shù)中監(jiān)聽。

window.addEventListener('setItem', ()=> {
    //這里就可以根據(jù)具體情況調(diào)用或刷新需要的操作
    this.avatar = sessionStorage.getItem("avatarUrl");; //獲取監(jiān)聽的值
})