Vue3优雅地监听localStorage变化

Sonder

2023-06-06

3545字

9分钟

浏览 (1.4k)

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

「Vue3如何监听localStorage的变化。」

💡 为什么要这样做？

原生的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(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>