vue3 监听localstorage

在Vue 3中，你可以通过组合式API（Composition API）来监听`localStorage`的变化。组合式API提供了一个`watch`函数，允许你监听响应式数据源的变化。由于`localStorage`本身不是响应式的，因此需要使用一种方法使其变为响应式，然后用`watch`来监听这个响应式数据源。 以下是一个如何在Vue 3中使用组合式API监听`localStorage`变化的例子： ```javascript 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`生命周期钩子来停止监听。

### 实现 Vue 中监听 LocalStorage 变化 为了在 Vue 应用中有效地监听 `localStorage` 的变化，可以采用多种方法来确保组件能够响应存储的变化并及时更新状态。 #### 方法一：利用自定义 Hook 和 Pinia Store 结合的方式 通过创建一个专门用于处理本地存储逻辑的 Pinia store 来集中管理数据读取和写入操作。这不仅有助于保持业务逻辑的一致性和可维护性，还允许其他模块轻松订阅这些变更通知[^3]。 ```javascript // src/store/useStorage.js import { defineStore } from 'pinia'; export const useStorage = defineStore({ id: 'storage', state: () => ({ stationId: localStorage.getItem('stationId'), }), actions: { setStationId(id) { this.stationId = id; localStorage.setItem('stationId', id); }, }, }); ``` 接着，在任何想要监控特定键值变动情况下的组件内部注册观察者函数： ```javascript <script setup> import { ref, onMounted, watch } from 'vue'; import { useStorage } from '../store/useStorage'; const storage = useStorage(); watch( () => storage.stationId, (newValue, oldValue) => { console.log(`stationId changed from ${oldValue} to ${newValue}`); } ); onMounted(() => { window.addEventListener('storage', handleStorageChange); }); function handleStorageChange(event) { if (event.key === 'stationId') { storage.setStationId(event.newValue || ''); } } </script> ``` 这种方法的优势在于它将所有的存储交互封装在一个地方，并且可以通过简单的 API 调用来访问或修改存储中的值，同时也支持跨多个视图共享相同的状态副本[^2]。 #### 方法二：使用计算属性与监视器组合方案 对于较为简单的需求场景，则可以直接借助于 Vue 提供的基础特性——即计算属性配合侦听器完成同样的功能[^4]。 ```html <template> <!-- 组件模板 --> </template> <script> export default { name: "ExampleComponent", data() { return {}; }, computed: { lonlat() { let value = localStorage.getItem("lonlat"); console.log(value); return value; }, }, watch: { lonlat(newVal, oldVal) { console.log(1002, newVal, oldVal); }, }, }; </script> ``` 此方式适合那些只需要关注单一字段的情况；然而当涉及到更复杂的依赖关系或是希望在整个应用程序范围内统一处理这类事件时，推荐优先考虑前一种基于 Vuex 或 Pinia 的解决方案[^1]。