feat：请求真实数据

src/views/home/Home.vue

@@ -1,31 +1,39 @@
 <script setup lang="ts">
-	import { computed, reactive, ref, toRefs } from 'vue'
+import { computed, onMounted, reactive, ref, toRefs } from "vue";
-	
+import { getList } from "@/api/home";
-	import logo from '@/assets/logo.png'
+import logo from "@/assets/logo.png";
 
 const useShowList = () => {
   const state = reactive({
     list: [
-				{title: 'vite'},
+      { title: "vite" },
-				{title: 'rem移动端适配'},
+      { title: "rem移动端适配" },
-				{title: 'VantUI 组件按需加载'},
+      { title: "VantUI 组件按需加载" },
-				{title: 'Sass 全局样式'},
+      { title: "Sass 全局样式" },
-				{title: 'Vuex 状态管理'},
+      { title: "Vuex 状态管理" },
-				{title: 'Pinia 状态管理'},
+      { title: "Pinia 状态管理" },
-				{title: 'Axios 封装及接口管理'},
+      { title: "Axios 封装及接口管理" },
-				{title: 'Vue-router'},
+      { title: "Vue-router" },
-				{title: 'vite.config.ts 基础配置'},
+      { title: "vite.config.ts 基础配置" },
-				{title: '检查文件中的env路径'},
+      { title: "检查文件中的env路径" },
-				{title: '配置 proxy 跨域'},
+      { title: "配置 proxy 跨域" },
-				{title: '配置 alias 别名'},
+      { title: "配置 alias 别名" },
-				{title: 'Eslint+Pettier 统一开发规范'},
+      { title: "Eslint+Pettier 统一开发规范" },
-				{title: '批量全局注册公共组件'},
+      { title: "批量全局注册公共组件" },
-			]
+    ],
-		})
+  });
-		return toRefs(state)
+  return toRefs(state);
-	}
+};
-	const { list }  = useShowList()
+const { list } = useShowList();
 
+// 请求真实数据
+const get = async () => {
+  const result = await getList();
+};
+
+onMounted(() => {
+  get();
+});
 </script>
 
 <template>
@@ -42,7 +50,12 @@
     </div>
     <div class="py-5">
       <van-list finished-text="没有更多了">
-				<van-cell v-for="(item, index) in list" :key="index" :title="item.title" icon="success" />
+        <van-cell
+          v-for="(item, index) in list"
+          :key="index"
+          :title="item.title"
+          icon="success"
+        />
       </van-list>
     </div>
   </div>