Vue3优雅地监听localStorage变化

这篇具有很好参考价值的文章主要介绍了Vue3优雅地监听localStorage变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

💡前言 

💡 为什么要这样做?

💎 思路

💎 实现

🚗 实现中介者模式

🚗 重写localStorage

🚗 实现useStorage hook

💎 测试

🚗 使用localStorage

🚗 监听localStorage变化

🚗 结果


💡前言 

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

💡 为什么要这样做?

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

💎 思路

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

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

        在Vue3移除了$on$emit事件接口后,我们可以借助第三方库实现:mitttiny-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
<script setup lang="ts">
import { ref } from "vue";
import { localStorage } from "./hook";

const count = ref(0);
</script>

<template>
  <div>
      <button
        type="button"
        @click="$localStorage.setItem('a', count++);"
      >
        count is {{ count }}
      </button>
    </div>
</template>

🚗 结果

Vue3优雅地监听localStorage变化

 

好了今天的分享的就到了,希望今天的分享可以帮助到你!

源码点这里:https://codesandbox.io/p/sandbox/hardcore-hodgkin-qp5lwu文章来源地址https://www.toymoban.com/news/detail-475368.html

到了这里,关于Vue3优雅地监听localStorage变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 动态监听浏览器窗口变化

    定义一个属性记录宽度 在 vue mounted 的时候 去挂载一下 window.onresize 方法 去监听这个 属性值的变化,如果发生变化则讲这个 val 传递给 this.screenWidth 这样screenWidth就跟随浏览器的窗口大小动态变化了 进行使用

    2024年02月13日
    浏览(47)
  • vue3 实现监听store里state状态变化

    需要注意: 不能直接监听对象的属性值,需要写成getter函数。 总结: watch 的第一个参数可以是不同形式的数据源,它可以是一个ref(包括计算属性),一个响应式对象,一个getter函数,或多个数据源组成的数组。 不能直接监听响应式对象的属性: 这里需要写成返回对象属

    2024年02月17日
    浏览(42)
  • vue3 封装自定义指令,监听元素宽高的变化

    最近做一个项目,涉及到echart图,要去根据父元素去自适应宽高,所以需要监听到元素的宽高变化、 因为是 监听某一元素的宽高变化 ,所以这里用的是 ResizeObserver. ResizeObserver 是可以监听到DOM元素,宽高的变化,需要注意的一点就是监听出变化结果是contentBox的宽度和高度。

    2024年02月07日
    浏览(45)
  • Android 如何优雅地监听SystemProperties属性值变化

    我司项目中会频繁用到persist.sys.xxx的属性值,系统中预埋接口,通过属性值控制,以应对客户多样化的需求定制。 以往都是先设置属性值,再重启设备使能生效,抽空研究一下实时监听属性值变化,最后在csdn上查到监听SystemProperties变化 这篇文章。 博主的实现方法给了我很

    2024年02月05日
    浏览(48)
  • vue监听缓存数据(localStorage)

    方法:可以重写localStorage的setItem方法,当调用setItem方法设置新值的时候,会new Event(‘setItemEvent’) 用window.dispatchEvent()这个方法来派发一个事件,让window去监听 以下demo实现的是 一个页面获取诗句 然后将获取的数据用localStorage存储起来 另一个页面进行监听 一旦数据发生改变

    2024年02月08日
    浏览(40)
  • powershell 雅地关闭UDP监听器

    在PowerShell中优雅地关闭UDP监听器意味着你需要一种机制来安全地停止正在运行的 UdpClient 实例。由于 UdpClient 类本身没有提供直接的停止或关闭方法,你需要通过其他方式来实现这一点。通常,这涉及到在监听循环中添加一个检查点,以便在接收到停止信号时能够退出循环。

    2024年02月21日
    浏览(43)
  • vue watch监听数据变化

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化 这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置: 侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请

    2024年02月12日
    浏览(43)
  • vue2 如何监听数组的变化

    在Vue 2中,底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。 当Vue 2初始化一个响应式对象时,如果对象是一个数组,Vue会将数组的原型指向一个经过

    2024年02月12日
    浏览(48)
  • Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)

    父组件声明变量 父组件向子组件传递数据 Vue 数据类型 type 有以下几种: String:字符串类型。例如:“hello world”。 Number:数字类型。例如:12,1.5。 Boolean:布尔类型。例如:true,false。 Object:对象类型。例如:{name: ‘Tom’, age: 20}。 Array:数组类型。例如:[1, 2, 3]。 Fun

    2024年02月14日
    浏览(43)
  • Vue,js 监听window窗口尺寸变化

    1.监听window窗口变化 VueJs 监听 window.resize 方法,同时窗口拉伸时会频繁触发resize函数,导致页面性能 卡顿 ,可以搭配setTimeout来提升性能 在mounted中挂载resize方法 watch 监听 data中或props传递的数据

    2024年02月11日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包