vue watch监听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]。

Vue3 中的 `watch` 可以用来监听浏览器的 localStorage 变化，这样当localStorage的数据发生改变时，你的组件会自动更新。以下是基本的步骤： 1. 首先，在 Vue 组件的 data 或者 computed 中定义你想监听的 localStorage 键名： ```javascript data() { return { myStorageValue: window.localStorage.getItem('myKey') || '' } }, ``` 2. 使用 `watch` 来监听变化： ```javascript watch: { // 当 'myKey' 存储的值发生变化时，这个函数会被触发 'myStorageValue': function (newVal, oldVal) { console.log('localStorage value has changed:', newVal); // 在这里处理新旧值的变化 }, '$route'(to, from) { // 如果你想要监听路由变化并影响 localStorage，可以在这里添加相应的逻辑 this.myStorageValue = JSON.stringify(to.query); // 示例操作 } } ``` 在这个例子中，如果 `myKey` 的值从本地存储中获取到或者路由参数变化时，`myStorageValue` 就会重新设置，并调用回调函数。