refactor: 🧑‍💻 add utils for listening Tauri events on mount

src/components/FilesSelector.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { VBtn, VCard, VDialog, VIcon } from "vuetify/components";
-import { TauriEvent, type UnlistenFn, listen } from "@tauri-apps/api/event";
+import { TauriEvent } from "@tauri-apps/api/event";
+import { useTauriEvent } from "../utils";
 import { message, open } from "@tauri-apps/plugin-dialog";
 import { FileType, detectFileType } from "@/command";
 import FolderOpen from "~icons/ic/twotone-folder-open";
@@ -23,8 +24,6 @@ const selectFiles = async () => {
 const hover = ref(false);
 const hover_accept = ref(false);
 
-let listeners: UnlistenFn[];
-
 const checkFilesType = async (paths: string[]) => {
   const expectedType = props.directory ? FileType.dir : FileType.file;
   return (
@@ -35,36 +34,30 @@ const checkFilesType = async (paths: string[]) => {
   );
 };
 
-onMounted(async () => {
-  listeners = await Promise.all([
-    listen<{ paths: string[] }>(TauriEvent.DRAG_ENTER, async (e) => {
+onMounted(() => {
+  Promise.all([
+    useTauriEvent<{ paths: string[] }>(TauriEvent.DRAG_ENTER, async (e) => {
       hover.value = true;
       console.log("DRAG_ENTER", e.payload);
       hover_accept.value = await checkFilesType(e.payload.paths);
     }),
-    listen<{ paths: string[] }>(TauriEvent.DRAG_DROP, async (e) => {
+    useTauriEvent<{ paths: string[] }>(TauriEvent.DRAG_DROP, async (e) => {
       console.log("DRAG_DROP", e.payload);
       if (!(await checkFilesType(e.payload.paths)))
         await message(props.directory ? "只支持文件夹" : "只支持文件");
       else files.value = e.payload.paths;
       hover_accept.value = hover.value = false;
     }),
-    listen<unknown>(TauriEvent.DRAG_LEAVE, async (e) => {
+    useTauriEvent(TauriEvent.DRAG_LEAVE, async (e) => {
       console.log("DRAG_LEAVE", e.payload);
       hover.value = hover_accept.value = false;
     }),
-    listen<void>(TauriEvent.WINDOW_BLUR, async (e) => {
+    useTauriEvent(TauriEvent.WINDOW_BLUR, async (e) => {
       console.log("WINDOW_BLUR", e.payload);
       hover.value = hover_accept.value = false;
     }),
   ]);
 });
-
-onUnmounted(() => {
-  for (const unlistenFn of listeners) unlistenFn();
-
-  listeners = [];
-});
 </script>
 <template>
   <slot :select-files="selectFiles">

src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./tauri/";

src/utils/tauri/event.ts

@@ -0,0 +1,17 @@
+import {
+  listen,
+  type EventCallback,
+  type EventName,
+  type Options,
+} from "@tauri-apps/api/event";
+import { tryOnScopeDispose } from "@vueuse/core";
+
+export async function useTauriEvent<T>(
+  e: EventName,
+  handler: EventCallback<T>,
+  options?: Options,
+) {
+  const unlisten = await listen(e, handler, options);
+
+  tryOnScopeDispose(unlisten);
+}

src/utils/tauri/index.ts

@@ -0,0 +1 @@
+export * from "./event";