本文详解 Vue 3 组合式 API 下全局共享响应式状态的正确实现方式，指出因重复创建局部 ref 导致图片无法动态切换的根本原因，并提供修复方案与最佳实践。
本文详解 vue 3 组合式 api 下全局共享响应式状态的正确实现方式，指出因重复创建局部 `ref` 导致图片无法动态切换的根本原因，并提供修复方案与最佳实践。
在 Vue 3 项目中使用自定义 Hook（如 useTheme）管理主题状态时，一个常见但隐蔽的错误是：将响应式数据（如 ref）定义在函数内部。这会导致每次调用 useTheme() 都创建一份全新的、彼此隔离的 theme 实例——即使它们读取相同的 localStorage 初始值，也无法实现跨组件的响应式同步。
你当前的 useTheme.js 存在此问题：
// ❌ 错误：每次调用都新建 ref → 多个独立 theme 实例
export default function useTheme() {
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));
// ...
}因此，App.vue 和 Home.vue 中分别调用 useTheme()，实际获取的是两个不同 ref 对象。虽然 App.vue 修改了它的 theme.value 并触发了 watchEffect 写入 localStorage，但 Home.vue 中的 banner 计算属性监听的是另一个未被修改的 theme，自然不会重新求值，图片也就不会更新——必须刷新页面才能从 localStorage 重新读取初始值并创建新 ref，造成“伪响应式”假象。
✅ 正确做法是将 ref 提升至模块顶层，确保所有组件共享同一个响应式引用：
立即学习“前端免费学习笔记（深入）”；
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
// ✅ 正确：单例 ref，全局唯一
import { ref, watchEffect } from 'vue';
// 在模块作用域定义，仅初始化一次
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));
watchEffect(() => {
localStorage.setItem('theme', String(theme.value));
});
export default function useTheme() {
return { theme };
}同时，建议优化类型安全与初始化逻辑（可选但推荐）：
// 增强版：支持布尔值容错 + 类型提示
const savedTheme = localStorage.getItem('theme');
const initialTheme = savedTheme === 'true' || savedTheme === 'false'
? JSON.parse(savedTheme)
: false; // 默认浅色模式
const theme = ref(initialTheme);此外，在 Home.vue 中，确保 computed 正确依赖该共享 theme：
<script setup>
import { computed } from 'vue';
import { useTheme } from '@/composables/useTheme';
import DayTimeBanner from '@/assets/banner-city-daytime.png';
import NightTimeBanner from '@/assets/banner-city-nighttime.png';
const { theme } = useTheme();
// ✅ 此 computed 将精准响应全局 theme.value 的变化
const banner = computed(() =>
theme.value ? NightTimeBanner : DayTimeBanner
);
</script>
<template>
<img :src="banner" :alt="theme.value ? 'Nighttime Banner' : 'Daytime Banner'" />
</template>⚠️ 注意事项：
- 不要手动调用
localStorage.setItem在toggleTheme中（你的App.vue里已有），因为watchEffect已自动同步，重复写入易引发竞态； - 若项目使用 TypeScript，建议为
theme添加明确类型：const theme = ref<boolean>(initialTheme)</boolean>； - 所有使用
useTheme()的组件必须从同一模块路径导入，避免因路径别名或相对路径差异导致模块被多次加载（如@/composables/useThemevs../composables/useTheme）。
总结：Vue 的响应式系统依赖引用一致性。自定义 Hook 要实现状态共享，关键在于让 ref、reactive 等响应式对象脱离函数作用域，成为模块级单例。这是组合式 API 中实现跨组件状态管理的基础原则，也是解决“数据变了但视图不更新”类问题的核心突破口。
