From 02355494bf1f1155526aad5959b8b35a787eba1f Mon Sep 17 00:00:00 2001
From: AnotiaWang <anotia0202@gmail.com>
Date: Wed, 12 Feb 2025 22:47:39 +0800
Subject: [PATCH] fix: storeToRefs

---
 components/ConfigManager.vue | 28 ++++++++++++++--------------
 pages/index.vue              |  6 +++---
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/ConfigManager.vue b/components/ConfigManager.vue
index 3ed4f42..a2dfc32 100644
--- a/components/ConfigManager.vue
+++ b/components/ConfigManager.vue
@@ -8,7 +8,7 @@
     data: OpenAICompatibleModel[]
   }
 
-  const { config, aiApiBase } = useConfigStore()
+  const { config, aiApiBase } = storeToRefs(useConfigStore())
   const { t } = useI18n()
 
   const showModal = ref(false)
@@ -26,36 +26,36 @@
     },
   ])
   const selectedAiProvider = computed(() =>
-    aiProviderOptions.value.find((o) => o.value === config.ai.provider),
+    aiProviderOptions.value.find((o) => o.value === config.value.ai.provider),
   )
 
   // Try to find available AI models based on selected provider
   const debouncedListAiModels = useDebounceFn(async () => {
-    if (!config.ai.apiKey) return
-    if (!aiApiBase || !aiApiBase.startsWith('http')) return
+    if (!config.value.ai.apiKey) return
+    if (!aiApiBase.value || !aiApiBase.value.startsWith('http')) return
 
     try {
       loadingAiModels.value = true
       const result: OpenAICompatibleModelsResponse = await $fetch(
-        `${aiApiBase}/models`,
+        `${aiApiBase.value}/models`,
         {
           headers: {
-            Authorization: `Bearer ${config.ai.apiKey}`,
+            Authorization: `Bearer ${config.value.ai.apiKey}`,
           },
         },
       )
       console.log(
-        `Found ${result.data.length} AI models for provider ${config.ai.provider}`,
+        `Found ${result.data.length} AI models for provider ${config.value.ai.provider}`,
       )
       aiModelOptions.value = result.data.map((m) => m.id)
       // Auto-select the current model
-      if (!aiModelOptions.value.includes(config.ai.model)) {
-        aiModelOptions.value.unshift(config.ai.model)
+      if (!aiModelOptions.value.includes(config.value.ai.model)) {
+        aiModelOptions.value.unshift(config.value.ai.model)
       }
     } catch (error) {
       console.error(`Fetch AI models failed`, error)
-      if (config.ai.model) {
-        aiModelOptions.value = [config.ai.model]
+      if (config.value.ai.model) {
+        aiModelOptions.value = [config.value.ai.model]
       } else {
         aiModelOptions.value = []
       }
@@ -65,9 +65,9 @@
 
   watch(
     () => [
-      config.ai.provider,
-      config.ai.apiKey,
-      config.ai.apiBase,
+      config.value.ai.provider,
+      config.value.ai.apiKey,
+      config.value.ai.apiBase,
       showModal.value,
     ],
     () => {
diff --git a/pages/index.vue b/pages/index.vue
index e2ae1b1..1044a01 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -55,7 +55,7 @@
   import type { ResearchResult } from '~/lib/deep-research'
 
   const { t, locale } = useI18n()
-  const { config } = useConfigStore()
+  const { config } = storeToRefs(useConfigStore())
   const toast = useToast()
 
   const configManagerRef = ref<InstanceType<typeof ConfigManager>>()
@@ -77,8 +77,8 @@ ${feedback.value
   }
 
   async function generateFeedback(data: ResearchInputData) {
-    const aiConfig = config.ai
-    const webSearchConfig = config.webSearch
+    const aiConfig = config.value.ai
+    const webSearchConfig = config.value.webSearch
 
     if (!aiConfig.model || !aiConfig.apiKey || !webSearchConfig.apiKey) {
       toast.add({