Vue 监听 localStorage 值变化：完整指南与示例代码 - 轻松实现数据同步

在 Vue 中，您可以使用`watch`来监听 localStorage 中值的变化。\n\n首先，在 Vue 组件中，可以使用`watch`属性来监听 localStorage 中的值。在`watch`属性中，您可以指定一个函数，当 localStorage 中的值发生改变时，该函数会被调用。\n\n以下是一个示例：\n\njavascript\nexport default {\n data() {\n return {\n localStorageValue: localStorage.getItem('myValue') // 初始化时获取 localStorage 中的值\n };\n },\n watch: {\n localStorageValue(newValue) {\n // 当 localStorage 中的值发生改变时，会触发这个函数\n console.log('localStorageValue changed:', newValue);\n }\n },\n mounted() {\n // 监听 localStorage 的 storage 事件，当 localStorage 中的值发生改变时，会触发该事件\n window.addEventListener('storage', this.handleStorageChange);\n },\n beforeDestroy() {\n // 在组件销毁前，移除 localStorage 的 storage 事件监听\n window.removeEventListener('storage', this.handleStorageChange);\n },\n methods: {\n handleStorageChange(event) {\n if (event.key === 'myValue') {\n this.localStorageValue = event.newValue;\n }\n }\n }\n}\n\n\n在上述示例中，我们首先在`data`中初始化了`localStorageValue`，并将 localStorage 中的`myValue`赋值给它。然后使用`watch`属性监听`localStorageValue`的改变，并在该函数中做出相应的处理。\n\n在`mounted`钩子中，我们使用`addEventListener`监听 localStorage 的`storage`事件，当 localStorage 中的值发生改变时，会触发该事件。在`beforeDestroy`钩子中，我们使用`removeEventListener`移除 localStorage 的`storage`事件监听。\n\n最后，我们定义了一个`handleStorageChange`方法，用于处理 localStorage 中的值改变事件。在该方法中，我们判断`event.key`是否为`myValue`，如果是，则更新`localStorageValue`的值。