Vue3优雅地监听localStorage变化

目录

💡前言 

💡 为什么要这样做？

💎 思路

💎 实现

🚗 实现中介者模式

🚗 重写localStorage

🚗 实现useStorage hook

💎 测试

🚗 使用localStorage

🚗 监听localStorage变化

🚗 结果

💡前言 

        最近在研究框架，也仔细用了Vue3一些功能，今天分享一次我的实践：

💡 为什么要这样做？

        原生的localStorage只能监听同源地址下不同页面的localStorage变化，作为单页面应用，显然不实用。所以我打算自定义一个hook监听localStorage的变化。

💎 思路

        首先我们需要重写localStorage下的所有方法，这样在每个方法被使用的时候就可以被监听到了。

        此时就需要一个事件机制，用于传递消息。

        在Vue3移除了$on、$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(top