app/pages/about/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-container">
-    <div v-if="content">
+    <div v-if="!pending">
       <el-breadcrumb class="breadcrumb" separator="/">
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">
@@ -40,27 +40,19 @@
 <script setup lang="ts">
   const { findOne } = useStrapi();
   const { getStrapiLocale } = useLocalizations();
-
   const strapiLocale = getStrapiLocale();
 
-  const content = ref<string | null>(null);
+  const { data, pending, error } = useAsyncData('company-profile', () =>
+    findOne<StrapiCompanyProfile>('company-profile', undefined, {
+      locale: strapiLocale,
+    })
+  );
 
-  onMounted(async () => {
-    try {
-      const response = await findOne<StrapiCompanyProfile>(
-        'company-profile',
-        undefined,
-        {
-          locale: strapiLocale,
-        }
-      );
-      if (response.data) {
-        content.value = response.data.content || '';
-      } else {
-        console.warn('No company profile data found');
-      }
-    } catch (error) {
-      console.error('Failed to fetch company profile:', error);
+  const content = computed(() => data.value?.data.content);
+
+  watch(error, (value) => {
+    if (value) {
+      console.error('数据获取失败: ', value);
     }
   });
 </script>