From 7efa425c85ffe94420ad62c281b5766c279a1fa2 Mon Sep 17 00:00:00 2001
From: Jeffrey Hsu <xfj12@outlook.com>
Date: Wed, 18 Dec 2024 08:42:00 +0800
Subject: [PATCH] use nuxt plugin instead of function

---
 app.vue                           |  3 ++-
 components/alert/Notification.vue |  6 +++---
 composables/emitter.ts            | 10 ----------
 error.vue                         | 10 +++++++++-
 pages/article.vue                 |  3 ++-
 pages/error/maintenance.vue       |  4 +++-
 pages/index.vue                   |  3 ++-
 plugins/mitt.ts                   | 19 +++++++++++++++++++
 8 files changed, 40 insertions(+), 18 deletions(-)
 delete mode 100644 composables/emitter.ts
 create mode 100644 plugins/mitt.ts

diff --git a/app.vue b/app.vue
index 882da3d..87786e7 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 const loading = ref<HTMLDivElement | null>(null)
+const {$mitt} = useNuxtApp()
 
-emitter.on('startLoading', on => {
+$mitt.on('startLoading', on => {
   if (on) {
     loading.value?.classList.remove('stop')
     removeMobileTopColor()
diff --git a/components/alert/Notification.vue b/components/alert/Notification.vue
index d451948..9280613 100644
--- a/components/alert/Notification.vue
+++ b/components/alert/Notification.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+const {$mitt} = useNuxtApp()
 const notifications = ref<INotification[]>([]);
-
 const typeClasses = {
   success: 'bg-green-100 text-green-800 border border-green-400',
   error: 'bg-red-100 text-red-800 border border-red-400',
@@ -19,10 +19,10 @@ const addNotification = (notification: INotification) => {
 
 };
 
-emitter.on('eventBus', addNotification)
+$mitt.on('eventBus', addNotification)
 
 onBeforeUnmount(() => {
-  emitter.off('eventBus', addNotification);
+  $mitt.off('eventBus', addNotification);
 });
 </script>
 
diff --git a/composables/emitter.ts b/composables/emitter.ts
deleted file mode 100644
index c472f5a..0000000
--- a/composables/emitter.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import mitt from 'mitt'
-
-type Events = {
-  openPost: IPost
-  startLoading: boolean
-  eventBus: INotification
-}
-
-const emitter = mitt<Events>()
-export default emitter
\ No newline at end of file
diff --git a/error.vue b/error.vue
index 26c1df4..0009506 100644
--- a/error.vue
+++ b/error.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { NuxtError } from '#app'
+import { setMobileTopColor } from '~/composables/function'
 
 const props = defineProps({
   error: Object as () => NuxtError
 })
 
+const {$mitt} = useNuxtApp()
+
 const errorMessages: Record<string, { icon: string; title: string; message: string }> = {
   '400': {
     icon: '❓',
@@ -42,7 +45,12 @@ const errorContent = computed(() => errorMessages[props.error!.statusCode] || er
 console.error(props.error)
 
 onMounted(() => {
-  emitter.emit("startLoading", false)
+  $mitt.emit("startLoading", false)
+  setMobileTopColor()
+})
+
+onUnmounted(() => {
+  removeMobileTopColor()
 })
 </script>
 
diff --git a/pages/article.vue b/pages/article.vue
index 61c76f4..621f28e 100644
--- a/pages/article.vue
+++ b/pages/article.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+const {$mitt} = useNuxtApp()
 
 onMounted( () => {
-  emitter.emit('startLoading', false)
+  $mitt.emit('startLoading', false)
 })
 </script>
 
diff --git a/pages/error/maintenance.vue b/pages/error/maintenance.vue
index bb01b33..068d3ba 100644
--- a/pages/error/maintenance.vue
+++ b/pages/error/maintenance.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+const {$mitt} = useNuxtApp()
+
 onMounted(() => {
-  emitter.emit("startLoading", false)
+  $mitt.emit("startLoading", false)
 })
 </script>
 
diff --git a/pages/index.vue b/pages/index.vue
index 0706bf4..782e075 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {computed, onMounted, ref} from "vue";
 
+const {$mitt} = useNuxtApp()
 const recentPosts = ref<IPost[] | null>(null);
 const recentActivities = ref<IActivity[] | null>(null);
 const isLoading = ref({
@@ -76,7 +77,7 @@ await reloadPosts()
 await reloadActivities()
 
 onMounted(() => {
-  emitter.emit('startLoading', false)
+  $mitt.emit('startLoading', false)
 })
 </script>
 
diff --git a/plugins/mitt.ts b/plugins/mitt.ts
new file mode 100644
index 0000000..d6ce654
--- /dev/null
+++ b/plugins/mitt.ts
@@ -0,0 +1,19 @@
+import mitt from 'mitt'
+
+type Events = {
+    openPost: IPost
+    startLoading: boolean
+    eventBus: INotification
+}
+
+
+
+export default defineNuxtPlugin(() => {
+    const emitter = mitt<Events>()
+
+    return {
+        provide: {
+            mitt: emitter
+        }
+    }
+})
\ No newline at end of file