Vue项目暗黑模式响应式变量访问异常：页面加载时dark值始终为false

问题描述 #

我正在为Vue项目实现暗黑模式，通过状态管理添加/移除暗黑模式类实现明暗切换，相关代码如下：

状态管理代码（toggleTheme.ts）：

import {reactive} from "vue";

export const themeSwitch = reactive({
  dark: false,
  toggleTheme() {
    this.dark = !this.dark;
    console.log("dark in toggleTheme: " + this.dark);
    this.manipulateClass();
  },
  manipulateClass() {
    console.log("dark in manipulateClass: " + this.dark);
    if (this.dark) {
      document.documentElement.className = theme;
    } else {
      document.documentElement.classList.remove(theme);
    }
  }
})

组件中使用（NavBarLoggedIn.vue）：

<script setup lang="ts">
import { themeSwitch } from '../composables/toggleTheme.ts'
</script>

<template>
  <nav>
     <button @click="themeSwitch.toggleTheme()">切换主题</button>
  </nav>
</template>

为了在页面加载时自动应用主题，我在App.vue中添加了以下代码：

import {onMounted} from "vue";
import { themeSwitch } from "@/composables/toggleTheme";

onMounted(() => {
  console.log("dark: " + themeSwitch.dark);
  themeSwitch.manipulateClass();
})

但每次页面跳转后，读取到的dark值始终为false，onMounted钩子能正常触发。

核心原因 #

• 状态未持久化：当前dark状态仅存储在内存中，页面跳转（包括硬刷新、单页应用路由切换导致的组件重新初始化）时，themeSwitch对象会被重新创建，dark值被重置为初始的false。
• 代码潜在问题：manipulateClass方法中使用的theme变量未定义；直接赋值className会覆盖根元素原有类名，可能引发样式冲突。

解决方案 #

1. 持久化主题状态 #

使用localStorage保存主题状态，确保页面刷新或跳转后能恢复之前的设置：

修改toggleTheme.ts：

import { reactive } from "vue";

// 从localStorage读取初始状态，无记录则默认false
const initialDark = localStorage.getItem('darkTheme') === 'true';

export const themeSwitch = reactive({
  dark: initialDark,
  toggleTheme() {
    this.dark = !this.dark;
    // 将状态同步到localStorage
    localStorage.setItem('darkTheme', String(this.dark));
    this.manipulateClass();
  },
  manipulateClass() {
    const rootEl = document.documentElement;
    if (this.dark) {
      rootEl.classList.add('dark'); // 替换为你的暗黑模式类名
    } else {
      rootEl.classList.remove('dark');
    }
  }
})

// 初始化时立即应用主题
themeSwitch.manipulateClass();

2. 优化App.vue的初始化逻辑 #

由于App.vue作为根组件仅会挂载一次，上述代码中已经在themeSwitch初始化时调用了manipulateClass，因此可以移除App.vue中的onMounted逻辑；如果保留，也不会产生冲突，因为初始化时状态已经同步。

3. 修复类名操作问题 #

将直接赋值className改为使用classList.add/remove，避免覆盖根元素的其他全局类名。

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