如何让localStorage中的数据实现响应式？

你当前的代码只是在组件初始化时一次性从localStorage读取值赋值给ref，但localStorage的变化不会自动触发Vue的响应式更新——不管是其他页面/标签页修改了localStorage，还是当前页面直接修改localStorage，ref的值都不会同步，只有刷新页面重新初始化时才会读取新值。

要实现localStorage和ref的同步，需要做两件事：监听storage事件处理跨上下文的修改，同时封装统一的修改方法同步更新ref和localStorage：

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 初始化时读取localStorage值
const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true');

// 处理storage事件：监听其他上下文对localStorage的修改
const handleStorageUpdate = (e: StorageEvent) => {
  if (e.key === 'isLoggedIn') {
    isLoggedIn.value = e.newValue === 'true';
  }
};

// 组件挂载时添加监听
onMounted(() => {
  window.addEventListener('storage', handleStorageUpdate);
});

// 组件卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('storage', handleStorageUpdate);
});

// 封装修改方法：同步更新ref和localStorage
const updateLoginStatus = (status: boolean) => {
  isLoggedIn.value = status;
  localStorage.setItem('isLoggedIn', status.toString());
};
</script>

关键说明 #

• 如果是当前页面内修改登录状态，必须调用updateLoginStatus方法，而不是直接修改localStorage，这样才能保证ref和localStorage同步。
• storage事件仅在其他页面/标签页修改localStorage时触发，当前页面修改不会触发这个事件，所以需要通过封装方法来处理当前页面的修改场景。

内容的提问来源于stack exchange，提问作者user3953989