From 2aa0df5246b89f5b16a4ce904ce11ae51b86cf89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Fri, 12 Apr 2024 12:56:23 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-switchTheme.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/app/t-switchTheme.vue b/src/components/app/t-switchTheme.vue
index 1bb9895a..15b28e79 100644
--- a/src/components/app/t-switchTheme.vue
+++ b/src/components/app/t-switchTheme.vue
@@ -9,13 +9,12 @@
 </template>
 <script lang="ts" setup>
 import { event } from "@tauri-apps/api";
-import { computed, onMounted } from "vue";
+import { UnlistenFn } from "@tauri-apps/api/helpers/event";
+import { computed, onMounted, onUnmounted } from "vue";
 
 import { useAppStore } from "../../store/modules/app";
 
-// store
 const appStore = useAppStore();
-// theme
 const themeGet = computed({
   get() {
     return appStore.theme;
@@ -24,9 +23,10 @@ const themeGet = computed({
     appStore.theme = value;
   },
 });
+let themeListener: UnlistenFn;
 
 onMounted(async () => {
-  await listenOnTheme();
+  themeListener = await listenOnTheme();
 });
 
 async function switchTheme(): Promise<void> {
@@ -34,12 +34,18 @@ async function switchTheme(): Promise<void> {
   await event.emit("readTheme", themeGet.value);
 }
 
-async function listenOnTheme(): Promise<void> {
-  await event.listen("readTheme", (e) => {
-    const theme = <string>e.payload;
+async function listenOnTheme(): Promise<UnlistenFn> {
+  return await event.listen<string>("readTheme", (e) => {
+    const theme = e.payload;
     themeGet.value = theme === "default" ? "default" : "dark";
   });
 }
+
+onUnmounted(() => {
+  if (themeListener) {
+    themeListener();
+  }
+});
 </script>
 <style lang="css" scoped>
 .switch-box {