feat: init store

apps/front/src/stores/doc.ts

@@ -0,0 +1,37 @@
+import { DocCategory, getDocSidebar } from '@portfolio/api-client';
+import { defineStore } from 'pinia';
+
+export interface DocState {
+  inited: boolean;
+  docLoading: boolean;
+  loadingError?: string;
+  docContent?: DocCategory;
+}
+
+export const useDocStore = defineStore({
+  id: 'doc',
+  state: (): DocState => ({
+    inited: false,
+    docLoading: false,
+  }),
+  actions: {
+    init() {
+      if (this.inited) return;
+      this.docLoading = true;
+      getDocSidebar()
+        .then((body) => {
+          if (body.status === 200) {
+            this.docContent = body.data;
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          this.loadingError = 'Failed to load doc sidebar';
+        })
+        .finally(() => {
+          this.docLoading = false;
+          this.inited = true;
+        });
+    },
+  },
+});

apps/front/src/views/DocHomeView.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
+import { useDocStore } from '../stores/doc';
 
+const docStore = useDocStore();
+if (!docStore.inited && !docStore.docLoading) {
+    docStore.init();
+}
 </script>
 
 <template>

apps/front/src/views/DocView.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import { useDocStore } from '../stores/doc';
+
+const docStore = useDocStore();
+if (!docStore.inited && !docStore.docLoading) {
+    docStore.init();
+}
 
 </script>
 
 <template>
-    <div id="title" class="container">
+    <div id="title" class="container" v-if="docStore.inited">
         <h1>Doc sub page</h1>
-        <p>{{ $route.params.page }}</p>
+        <p>{{ $route.params.page.join("/") }}</p>
+        <div>
+            <p v-for="sidebar in docStore.docContent.sub_categories" :key="sidebar.name">
+                {{ sidebar.name }}
+            </p>
+        </div>
     </div>
 </template>