通过 watch 可以监听vue实例已有属性的变化，那么怎样监听 sessionStorage 中值的变化呢？
使用场景
以角色为例，将当前用户的角色存入 sessionStorage 的 role 中，切换角色后，首先要修改 sessionStorage 中的 role 值，接着需从 sessionStorage 中取出新的 role 值显示在页面上。
重难点： 当 sessionStorage 中的 role 值改变时，需同步更新所有页面的 role 值。
解决方案
使用公共组件封装各个页面对 role 值的显示，并在其中监听 sessionStorage 的变化，实时更新页面的 role 值
核心代码
将 sessionStorage 的变化注册为全局事件 setItem
（ 若想全局使用，则下方代码写在main.js中 ）
import Vue from "vue"; Vue.prototype.setSessionItem = function (key, newVal) { // 创建 StorageEvent 事件 let newStorageEvent = document.createEvent("StorageEvent"); const storage = { setItem: function (k, val) { sessionStorage.setItem(k, val); // 初始化 StorageEvent 事件 newStorageEvent.initStorageEvent( "setItem", // 事件别名 false, false, k, null, val, null, null ); // 派发事件 window.dispatchEvent(newStorageEvent); }, }; return storage.setItem(key, newVal); };
在页面创建时添加对 setItem 事件的监听
mounted() { // 添加对 sessionStorage 的监听 window.addEventListener("setItem", () => { this.role = sessionStorage.getItem("role"); }); },
在页面销毁时移除对 setItem 事件的监听
beforeDestroy() { // 移除对 sessionStorage 的监听 window.removeEventListener("setItem", () => {}); },
完整范例
首次进入页面的效果
点击按钮修改角色后
完整代码如下：
<template> <div style="padding: 20px"> <p>sessionStorage中“role” 的值为 —— {{ role }}</p> <el-button type="primary" @click="change" >将sessionStorage中“role” 的值改为“管理员”</el-button > </div> </template> <script> import Vue from "vue"; Vue.prototype.setSessionItem = function (key, newVal) { // 创建 StorageEvent 事件 let newStorageEvent = document.createEvent("StorageEvent"); const storage = { setItem: function (k, val) { sessionStorage.setItem(k, val); // 初始化 StorageEvent 事件 newStorageEvent.initStorageEvent( "setItem", // 事件别名 false, false, k, null, val, null, null ); // 派发事件 window.dispatchEvent(newStorageEvent); }, }; return storage.setItem(key, newVal); }; export default { data() { return { role: sessionStorage.getItem("role") || "未定义角色", }; }, mounted() { // 添加对 sessionStorage 的监听 window.addEventListener("setItem", () => { this.role = sessionStorage.getItem("role"); }); }, beforeDestroy() { // 移除对 sessionStorage 的监听 window.removeEventListener("setItem", () => {}); }, methods: { change() { // 修改 sessionStorage 中的值 this.setSessionItem("role", "管理员"); }, }, }; </script>
