vue3监听localStorage

在Vue 3中，你可以通过组合式API（Composition API）来监听`localStorage`的变化。组合式API提供了一个`watch`函数，允许你监听响应式数据源的变化。由于`localStorage`本身不是响应式的，因此需要使用一种方法使其变为响应式，然后用`watch`来监听这个响应式数据源。

以下是一个如何在Vue 3中使用组合式API监听`localStorage`变化的例子：

import { ref, watch } from 'vue';

// 创建一个响应式引用
const storageKey = ref('yourStorageKey');
const storageValue = ref(localStorage.getItem(storageKey.value));

// 监听storageKey的值的变化
watch(storageKey, async () => {
  storageValue.value = localStorage.getItem(storageKey.value);
});

// 监听localStorage中对应键值的变化
watch(
  () => localStorage.getItem(storageKey.value),
  (newValue) => {
    storageValue.value = newValue;
    console.log('Storage value changed:', newValue);
  }
);

// 当需要在组件中改变localStorage的值时
function updateStorage(value) {
  localStorage.setItem(storageKey.value, value);
  storageValue.value = value;
}

// 在组件销毁时清除监听
onBeforeUnmount(() => {
  watch.stop();
});

上述代码中，我们首先通过`ref`创建了一个响应式的`storageKey`引用，用于存储我们想要监听的`localStorage`键名。然后，我们使用`watch`函数来监听这个键名的变化，并在变化时获取新的值更新到`storageValue`引用中。

除此之外，我们还使用了一个箭头函数作为`watch`的第二个参数，这个箭头函数会返回`localStorage`中当前键名对应的值，以此来监听这个值的变化。当`localStorage`中的值发生变化时，我们可以执行相应的操作，比如更新状态或打印日志。

最后，为了避免内存泄漏，我们在组件销毁之前使用`onBeforeUnmount`生命周期钩子来停止监听。