Vue.js 3 中优雅地观察 localStorage 变化的秘诀

2023-12-30 09:23:00

跨越页面界限：使用自定义 Vue.js 钩子无缝同步 localStorage

在现代单页面应用程序 (SPA) 中，跨页面数据同步和实时更新至关重要。原生 localStorage，一种广泛使用的浏览器存储机制，虽然提供了持久性，却在跨页面监听变化方面存在局限性。本文将深入探讨如何使用自定义 Vue.js 钩子优雅地解决这一问题，从而实现跨页面数据的无缝同步。

原生 localStorage 的局限性

localStorage 是一种本地存储机制，允许您在客户端安全、持久地存储数据。它对同源页面开放访问，但在不同页面之间监听变化时却存在局限性。这意味着，如果您有一个多页面的 SPA，在一个页面对 localStorage 进行了更新，这些更改不会自动反映在其他页面中。

自定义钩子：一种优雅的解决方案

为了解决这个问题，我们可以创建自定义 Vue.js 钩子，它充当全局事件监听器，监视 localStorage 中的变化。以下是步骤：

创建自定义钩子： 在您的项目中创建一个新文件，例如 useLocalStorage.js。导出一个名为 useLocalStorage 的函数。
监听存储事件： 使用 window.addEventListener 方法在 useLocalStorage 函数中监听 storage 事件。
获取更改： 在 storage 事件回调函数中，使用 event.key 和 event.newValue 获取发生更改的键和值。
更新 Vuex 状态： 使用 Vue.set() 方法更新 Vuex 存储中相应的状态。

使用自定义钩子

创建了自定义钩子后，您就可以在 Vue.js 组件中使用它来实现跨页面数据同步和实时更新。示例如下：

import { useLocalStorage } from './useLocalStorage.js';

export default {
  setup() {
    const { data: localStorageData } = useLocalStorage('my-key');

    // 监听 'my-key' 变化
    watch(localStorageData, (newValue, oldValue) => {
      // 执行相关操作
    });

    return {
      localStorageData,
    };
  },
};