Refactor API requests and update component structure

pages/home/components/SideMenu.vue

@@ -58,7 +58,26 @@ const submenuTop = ref(0);
 const sideMenu = ref();
 const menuItemRefs = ref<HTMLElement[]>([]);
 
-const menuItems = ref<ProjectDictNodeVO[]>([]);
+// const menuItems = ref<ProjectDictNodeVO[]>([]);
+
+// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
+const { data: menuItems, pending, error } = useAsyncData(
+  'tab2-list',
+  async () => {
+    const res = await tab2()
+      const arr = [];
+      for (let i = 0; i < res.data?.length; i += 2) {
+        arr.push({
+          children: res.data.slice(i, i + 2),
+          name: getName(res.data.slice(i, i + 2)),
+        });
+      }
+    return arr
+  }
+)
+
+
+
 
 const showSubMenu = (index: number) => {
   // if (menuItems.value.length === index + 1) {
@@ -108,18 +127,6 @@ const setMenuItemRef = (
     menuItemRefs.value[index] = el as HTMLElement;
   }
 };
-const getLabel = () => {
-  tab2().then((res) => {
-    const arr = [];
-    for (let i = 0; i < res.data.length; i += 2) {
-      arr.push({
-        children: res.data.slice(i, i + 2),
-        name: getName(res.data.slice(i, i + 2)),
-      });
-    }
-    menuItems.value = arr;
-  });
-};
 
 const getName = (arr: any[]) => {
   if (arr.length === 1) {
@@ -131,11 +138,11 @@ const getName = (arr: any[]) => {
 
 const init = () => {
   // 获取标签
-  getLabel()
+  // getLabel()
 };
 
 onMounted(() => {
-  init();
+  // init();
 });
 </script>