vue中监听localstorage变化

### 实现 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]。