🐛 修复主题切换响应异常

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app :theme="vuetifyTheme">
+  <v-app v-model:theme="vuetifyTheme">
     <TSidebar v-if="isMain" />
     <v-main>
       <v-container :fluid="true" class="app-container">
@@ -17,7 +17,7 @@ import { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { currentMonitor, getCurrentWindow } from "@tauri-apps/api/window";
 import { mkdir } from "@tauri-apps/plugin-fs";
 import { storeToRefs } from "pinia";
-import { computed, onBeforeMount, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
 import TBackTop from "./components/app/t-backTop.vue";
@@ -41,29 +41,23 @@ const vuetifyTheme = computed<string>(() => (theme.value === "dark" ? "dark" : "
 let themeListener: UnlistenFn | null = null;
 let urlListener: UnlistenFn | null = null;
 
-onBeforeMount(async () => {
+onMounted(async () => {
   const win = getCurrentWindow();
   isMain.value = win.label === "TeyvatGuide";
   if (isMain.value) {
     const title = "Teyvat Guide v" + (await app.getVersion()) + " Beta";
     await win.setTitle(title);
-    listenOnInit();
+    await listenOnInit();
     await core.invoke("init_app");
     urlListener = await getDeepLink();
   }
   if (needResize.value !== "false") await checkResize();
   document.documentElement.className = theme.value;
-});
-
-onMounted(async () => {
-  await getCurrentWindow().show();
-  themeListener = await event.listen("readTheme", async (e: Event<string>) => {
-    const themeGet = e.payload;
-    if (theme.value !== themeGet) {
-      theme.value = themeGet;
-      document.documentElement.className = theme.value;
-    }
+  themeListener = await event.listen<string>("readTheme", (e: Event<string>) => {
+    theme.value = e.payload;
+    document.documentElement.className = theme.value;
   });
+  await getCurrentWindow().show();
 });
 
 async function checkResize(): Promise<void> {
@@ -95,9 +89,9 @@ function getSize(label: string): PhysicalSize {
 }
 
 // 启动后只执行一次的监听
-function listenOnInit(): void {
+async function listenOnInit(): Promise<void> {
   console.info("[App][listenOnInit] 监听初始化事件！");
-  event.listen("initApp", async () => {
+  await event.listen<void>("initApp", async () => {
     await checkAppLoad();
     await checkDeviceFp();
     try {

src/components/app/t-switchTheme.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="switch-box" :title="themeGet === 'default' ? '切换到深色模式' : '切换到浅色模式'">
+  <div class="switch-box" :title="theme === 'default' ? '切换到深色模式' : '切换到浅色模式'">
     <div class="switch-btn" @click="switchTheme()">
       <v-icon>
-        {{ themeGet === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
+        {{ theme === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
       </v-icon>
     </div>
   </div>
@@ -10,35 +10,30 @@
 <script lang="ts" setup>
 import { event } from "@tauri-apps/api";
 import { Event, UnlistenFn } from "@tauri-apps/api/event";
-import { computed, onMounted, onUnmounted, shallowRef } from "vue";
+import { storeToRefs } from "pinia";
+import { onMounted, onUnmounted } from "vue";
 
 import { useAppStore } from "../../store/modules/app.js";
 
+const { theme } = storeToRefs(useAppStore());
 const appStore = useAppStore();
-const themeGet = computed<string>({
-  get: () => appStore.theme,
-  set: (v: string) => (appStore.theme = v),
-});
-const themeListener = shallowRef<UnlistenFn | null>(null);
+let themeListener: UnlistenFn | null = null;
 
-onMounted(async () => (themeListener.value = await listenOnTheme()));
+onMounted(async () => {
+  themeListener = event.listen("readTheme", (e: Event<string>) => {
+    theme.value = e.payload === "default" ? "default" : "dark";
+  });
+});
 
 async function switchTheme(): Promise<void> {
   appStore.changeTheme();
-  await event.emit("readTheme", themeGet.value);
-}
-
-async function listenOnTheme(): Promise<UnlistenFn> {
-  return await event.listen("readTheme", (e: Event<string>) => {
-    const theme = e.payload;
-    themeGet.value = theme === "default" ? "default" : "dark";
-  });
+  await event.emit("readTheme", theme.value);
 }
 
 onUnmounted(() => {
-  if (themeListener.value !== null) {
-    themeListener.value();
-    themeListener.value = null;
+  if (themeListener !== null) {
+    themeListener();
+    themeListener = null;
   }
 });
 </script>