前端之神 2023-06-03 08:30 发表于广东 以下文章来源于萌萌哒草头将军 ，作者萌萌哒草头将军 今天分享一篇好文: 最近在研究框架，也仔细用了Vue3一些功能，今天分享一次我的实践：
「Vue3如何监听localStorage的变化。」
💡 为什么要这样做？ 原生的localStorage只能监听同源地址下不同页面的localStorage变化，作为单页面应用，显然不实用。所以我打算自定义一个hook监听localStorage的变化。
💎 思路 首先我们需要重写localStorage下的所有方法，这样在每个方法被使用的时候就可以被监听到了。
此时就需要一个事件机制，用于传递消息。
在Vue3移除了emit事件接口后，我们可以借助第三方库实现：mitt、tiny-emitter.
不过我打算使用自己实现的中介者模式作为通信方法。
💎 实现 🚗 实现中介者模式 // mediator.ts export interface MediatorProps { uuid?: number; publish?: (topic: string, ...args: unknown[]) => void; subscribe?: (topic: string, callback: (...args: unknown[]) => void) => void; }
const mediator = (function () { let topics = [], uuid = 0;
function subscribe(topic: string, callback: (...args: unknown[]) => void) { uuid++; topics[topic] = topics[topic] ? [...topics[topic], { callback, uuid }] : [{ callback, uuid }]; }
function publish(topic: string, ...args: unknown[]) { if (topics[topic]) { topics[topic].map((item) => item.callback(...args)); } } return { install: function (obj: MediatorProps) { obj.uuid = uuid; obj.publish = publish; obj.subscribe = subscribe; return obj; }, }; })();
export default mediator; 🚗 重写localStorage // localStorage.ts import mediator from "./mediator";
const keys: string[] = [];
const createMediator = () => mediator.install({});
const sub = createMediator();
export const $localStorage = { getItem: (key: string) => { return window.localStorage.getItem(key); },
setItem: (key: string, value: any) => { // 防止重复发布 if (!keys.includes(key)) keys.push(key);
// 被修改就发布事件
sub.publish(key, value);
window.localStorage.setItem(key, value);
}, clear: () => { // 被删除就每个key发布事件 keys.map((key) => sub.publish(key, undefined)); // 发布后清空记录key的数组 keys.length = 0;
window.localStorage.clear();
}, removeItem: (key: string) => { keys.splice(keys.indexOf(key), 1);
// 被移除就发布 undefined
sub.publish(key, undefined);
window.localStorage.removeItem(key);
}, key: window.localStorage.key, length: window.localStorage.length, }; 🚗 实现useStorage hook // useStorage.ts import { ref } from "vue"; import mediator from "./mediator"; const createMediator = () => mediator.install({});
export const useStorage = (key: string) => {
const string = ref(null);
const sub = createMediator();
sub.subscribe(key, (value) => string.value = value);
return string; };
💎 测试 🚗 使用localStorage // One.vue // 使用localStorage import { watch } from "vue"; import { useStorage } from "./hook";
const key = useStorage("yourKey");
watch([key], (a) => console.log(a)); 🚗 监听localStorage变化 // Two.vue // 监听localStorage
🚗 结果 图片 打印结果 好了今天的分享的就到了，希望今天的分享可以帮助到你！
