feat:增加状态存储

src/App.vue

@@ -8,7 +8,6 @@
 
     <!-- 英雄区域 -->
     <HeroSection
-        :personal-info="personalInfo"
         @scroll-to-section="scrollToSection"
     ></HeroSection>
 
@@ -33,13 +32,13 @@
     <!-- 联系方式 -->
     <ContactSection
         :contact-info="contactInfo"
-        :social-links="personalInfo.socials"
+        :social-links="profileStore.personalInfo.socials"
         section-id="contact"
     ></ContactSection>
 
     <!-- 页脚 -->
     <Footer
-        :name="personalInfo.name"
+        :name="profileStore.personalInfo.name"
     ></Footer>
   </div>
 </template>
@@ -54,6 +53,10 @@ import EducationSection from './components/EducationSection.vue'
 import ContactSection from './components/ContactSection.vue'
 import Footer from './components/Footer.vue'
 
+import { useProfileStore } from '@/store/profile.js'
+
+const profileStore = useProfileStore()
+
 // 滚动位置
 const scrollPosition = ref(0)
 
@@ -78,19 +81,6 @@ const scrollToSection = (sectionId) => {
   }
 }
 
-// 个人信息数据
-const personalInfo = {
-  name: '陈修翔',
-  title: '全栈工程师',
-  description: '拥有5年前端开发经验，专注于构建响应式、高性能的现代Web应用，精通JavaScript、React和Vue等前端技术栈。',
-  socials: [
-    { name: 'GitHub', icon: 'fa-brands fa-github', url: '#' },
-    { name: 'LinkedIn', icon: 'fa-brands fa-linkedin', url: '#' },
-    { name: 'Twitter', icon: 'fa-brands fa-twitter', url: '#' },
-    { name: 'Email', icon: 'fa-solid fa-envelope', url: '#' }
-  ]
-}
-
 // 技能数据
 const skills = [
   {

src/components/HeroSection.vue

@@ -10,14 +10,15 @@
 
         <div class="hero-info animate__animated animate__fadeIn animate__delay-300">
           <h1>
-            {{ personalInfo.name }} <span class="title-highlight">/ {{ personalInfo.title }}</span>
+            {{ profileStore.personalInfo.name }}
+            <span class="title-highlight">/ {{ profileStore.personalInfo.title }}</span>
           </h1>
-          <p class="description">{{ personalInfo.description }}</p>
+          <p class="description">{{ profileStore.personalInfo.description }}</p>
 
           <!-- 社交媒体链接 -->
           <div class="social-links">
             <a
-              v-for="(social, index) in personalInfo.socials"
+              v-for="(social, index) in profileStore.personalInfo.socials"
               :key="index"
               :href="social.url"
               :title="social.name"
@@ -52,16 +53,10 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
 import { getAssetsImageFile } from '@/utils/index.js'
+import { useProfileStore } from '@/store/profile.js'
 
-// 接收个人信息属性
-const props = defineProps({
-  personalInfo: {
-    type: Object,
-    required: true
-  }
-})
+const profileStore = useProfileStore()
 
 // 定义事件
 const emits = defineEmits(['scroll-to-section'])

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 
 // 引入element-ui组件
@@ -16,6 +17,7 @@ import 'animate.css'
 
 // 创建Vue3实例
 const app = createApp(App)
+app.use(createPinia())
 // 使用Element UI Plus
 app.use(ElementPlus, { locale: zhCn })
 // 挂载到根组件上

src/store/profile.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+export const useProfileStore = defineStore('profile', {
+  state: () => ({
+    personalInfo: {
+      name: '陈修翔',
+      title: '全栈工程师',
+      description: '拥有5年前端开发经验，专注于构建响应式、高性能的现代Web应用，精通JavaScript、React和Vue等前端技术栈。',
+      socials: [
+        { name: 'GitHub', icon: 'fa-brands fa-github', url: '#' },
+        { name: 'LinkedIn', icon: 'fa-brands fa-linkedin', url: '#' },
+        { name: 'Twitter', icon: 'fa-brands fa-twitter', url: '#' },
+        { name: 'Email', icon: 'fa-solid fa-envelope', url: '#' }
+      ]
+    }
+  }),
+  actions: {
+
+  }
+})