本文解决 Vue 3 组合式 API 下主题状态（白天/夜间）切换时， 无法实时响应更新的问题——根本原因是 useTheme() 每次调用都创建了独立的 ref 实例，导致状态不共享，破坏了响应式一致性。
本文解决 vue 3 组合式 api 下主题状态（白天/夜间）切换时，`` 无法实时响应更新的问题——根本原因是 `usetheme()` 每次调用都创建了独立的 `ref` 实例，导致状态不共享，破坏了响应式一致性。
在 Vue 应用中实现昼夜主题切换时，若图片资源（如 banner）未能随 theme 状态变化而自动更新，通常并非模板或计算属性写法错误，而是状态管理方式违背了组合式函数的设计原则：useTheme() 必须返回单一、共享的响应式引用，而非每次调用都新建一个。
你原始代码的问题在于：
// ❌ 错误：每次调用 useTheme() 都创建新的 ref，状态隔离
export default function useTheme() {
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false')); // ← 每个组件调用都新建！
// ...
}当 App.vue 和 Home.vue 分别调用 useTheme() 时，它们获取的是两个互不关联的 theme ref。虽然 App.vue 修改了它自己的 theme.value，但 Home.vue 中的 banner 计算属性监听的是另一个 theme，因此不会触发重新求值——这就是为何背景类名（由 App.vue 直接操作）能即时生效，而图片却需刷新才显示。
✅ 正确做法是将 theme 声明为模块级顶层变量，确保所有组件共享同一响应式源：
立即学习“前端免费学习笔记（深入）”；
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
// ✅ useTheme.js：状态提升至模块作用域
import { ref, watchEffect } from 'vue';
// 单一响应式源：所有组件共用同一个 ref
const theme = ref(JSON.parse(localStorage.getItem('theme') || 'false'));
// 自动持久化，无需在组件内重复调用 localStorage.setItem
watchEffect(() => {
localStorage.setItem('theme', JSON.stringify(theme.value));
});
export default function useTheme() {
return { theme };
}同时，建议统一数据类型处理，避免 JSON.parse('false') 返回布尔值而 String(true) 存为 "true" 字符串带来的隐式转换风险。优化后的完整实现如下：
// useTheme.js
import { ref, watchEffect } from 'vue';
const saved = localStorage.getItem('theme');
const initialTheme = saved === 'true' || saved === 'false' ? JSON.parse(saved) : false;
const theme = ref(initialTheme);
watchEffect(() => {
localStorage.setItem('theme', JSON.stringify(theme.value));
});
export default function useTheme() {
return { theme };
}在组件中保持简洁调用即可：
<!-- Home.vue -->
<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();
const banner = computed(() =>
theme.value ? NightTimeBanner : DayTimeBanner
);
</script>
<template>
<img :src="banner" :alt="theme.value ? 'Nighttime Banner' : 'Daytime Banner'" />
</template>⚠️ 注意事项：
- 不要在组件内手动调用
localStorage.setItem('theme', ...)，否则会与watchEffect冲突，导致重复写入或覆盖； - 图片路径必须为有效的静态资源导入（如
import xxx from '...'），不可使用字符串拼接或动态路径（Vite/Webpack 无法在构建时解析）； - 若后续扩展多主题（如 auto、light、dark），建议改用
ref('light')+computed映射，而非布尔值，提升可维护性。
通过将响应式状态提升至模块顶层，你不仅修复了图片不更新的问题，也真正实现了跨组件的状态同步——这是 Vue 组合式 API 中「可复用逻辑」的最佳实践核心。
