From ab0e5f5e36ee8a32ca37ec4a1e7a21633421fd93 Mon Sep 17 00:00:00 2001
From: Tony Yang <t510599@gmail.com>
Date: Thu, 17 Apr 2025 12:32:01 +0800
Subject: [PATCH] fix: global reactive attrs

change to ref for primitive types, use provide/inject instead of globalConfig
---
 src/components/CAPTCHA.vue | 2 ++
 src/components/Navbar.vue  | 4 +++-
 src/lib/darkMode.js        | 8 ++++----
 src/lib/isMobile.js        | 8 ++++----
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/CAPTCHA.vue b/src/components/CAPTCHA.vue
index ef58be6..5f7ff80 100644
--- a/src/components/CAPTCHA.vue
+++ b/src/components/CAPTCHA.vue
@@ -5,6 +5,8 @@ import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";
 import VueTurnstile from 'vue-turnstile';
 
+const $darkMode = inject('$darkMode');
+
 const { handleReset: handleRecaptchaReset } = useRecaptcha();
 
 const props = defineProps({
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 1adfe9e..ca08a88 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { useRouter, RouterLink } from 'vue-router';
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 import { useAuthStore } from '../stores/auth';
 
+const $isMobile = inject('$isMobile');
+
 const router = useRouter();
 const authStore = useAuthStore();
 
diff --git a/src/lib/darkMode.js b/src/lib/darkMode.js
index 29e00ec..9c3c413 100644
--- a/src/lib/darkMode.js
+++ b/src/lib/darkMode.js
@@ -1,14 +1,14 @@
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 const darkModeMediaQuery = '(prefers-color-scheme: dark)';
 const matchMedia = window.matchMedia(darkModeMediaQuery);
 
-const darkMode = reactive(matchMedia.matches);
+const darkMode = ref(matchMedia.matches);
 
 matchMedia.addEventListener('change', (event) => {
-  darkMode = event.matches;
+  darkMode.value = event.matches;
 });
 
 export const install = (app) => {
- app.config.globalProperties.$darkMode = darkMode;
+  app.provide('$darkMode', darkMode);
 }
\ No newline at end of file
diff --git a/src/lib/isMobile.js b/src/lib/isMobile.js
index 33d0f7f..9258227 100644
--- a/src/lib/isMobile.js
+++ b/src/lib/isMobile.js
@@ -1,14 +1,14 @@
-import { reactive } from 'vue';
+import { ref } from 'vue';
 
 const mobileMediaQuery = 'screen and (max-width: 768px)';
 const matchMedia = window.matchMedia(mobileMediaQuery);
 
-const isMobile = reactive(matchMedia.matches);
+const isMobile = ref(matchMedia.matches);
 
 matchMedia.addEventListener('change', (event) => {
-  isMobile = event.matches;
+  isMobile.value = event.matches;
 });
 
 export const install = (app) => {
- app.config.globalProperties.$isMobile = isMobile;
+  app.provide('$isMobile', isMobile);
 }
\ No newline at end of file