文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何优雅地观察 Vue.js 3 中 localStorage 的变化?

2024-11-30 03:35

关注

方法

我们需要重写 localStorage 下的所有方法,以便无论何时使用它们都可以被观察到。这就需要一个事件机制来进行消息传递。

由于 Vue 3 删除了和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: () => {
    // 为每个键清除时发布一个事件
    keys.map((key) => sub.publish(key, undefined));
    // 发布后,清除记录键值的数组
    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 钩子

// 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;
};

第四,我写的测试代码是这样的:

// One.vue
// use localStorage
import { watch } from "vue";
import { useStorage } from "./hook";

const key = useStorage("imodd");

watch([key], (a) => console.log(a));

// Two.vue
// Observe localStorage

然后,结果是这样的

图片

好了,这就是全部了。希望这篇文章能给你带来一点帮助。

https://javascript.plainenglish.io/how-to-elegantly-observe-localstorage-changes-in-vue-3-a42fcf9c82ca

来源:独立开发者张张内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯