vueプロジェクトでのlocalStorageまたはsessionStorageの変更の傍受

一、まずmain.jsにおいてVue.protorypeにグローバルメソッドを登録し、StorageEventを実行するときにイベントを初期化し、イベントを送信するsessionStorage.setItem(k, val)メソッドを作成する.

/**
 * @description
 * @author (Set the text for this tag by adding docthis.authorName to your settings file.)
 * @date 2019-05-29
 * @param { number } type 1 localStorage 2 sessionStorage
 * @param { string } key  
 * @param { string } data       
 * @returns 
 */
Vue.prototype.$addStorageEvent = function (type, key, data) {
    if (type === 1) {
		//     StorageEvent  
		var newStorageEvent = document.createEvent('StorageEvent');
		const storage = {
		    setItem: function (k, val) {
		        localStorage.setItem(k, val);
		        //         
		        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
		        //     
		        window.dispatchEvent(newStorageEvent);
		    }
		}
		return storage.setItem(key, data);
	} else {
		//     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, data);
	}
}

二、コンポーネントの呼び出し:

this.$addStorageEvent(2, "user_info", data);

三、別のコンポーネントのmountedフック関数で傍受する.

window.addEventListener('setItem', (e) => {
     console.log(e);
});