Files page Pinia Done

src/components/Navbar.vue

@@ -5,10 +5,10 @@
         <div class="flex flex-1 items-center">
             <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
             <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-              <li @click="changeViewType('all')">ALL</li>
-              <li @click="changeViewType('discover')">DISCOVER</li>
-              <li @click="changeViewType('compare')">COMPARE</li>
-            <li @click="changeViewType('disign')">DESIGN</li>
+              <li @click="switchNavItem($event)">ALL</li>
+              <li @click="switchNavItem($event)">DISCOVER</li>
+              <li @click="switchNavItem($event)">COMPARE</li>
+              <li @click="switchNavItem($event)">DESIGN</li>
           </ul>
         </div>
         <div class="flex justify-end items-center">
@@ -35,6 +35,7 @@
 </template>
 
 <script>
+ import filesStore from '@/stores/files.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
 
@@ -43,27 +44,34 @@ export default {
     return {
       showNavbarBreadcrumb: false,
       // 之後優化要模組化
-      // viewType:[
-      //   {
-      //     typeName: '',
-      //     typeCategory: [],
-      //   }
-      // ]
-      viewType: ''
+      // navViewName: {
+      //   files: ['all', 'discover', 'compare', 'design'],
+      // },
+      navViewName: '',
     };
   },
+  setup() {
+    const store = filesStore();
+
+    return {
+      store,
+    }
+  },
   components: {
     IconSearch,
-    IconSetting
+    IconSetting,
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
   methods: {
-    changeViewType(type) {
-      this.viewType = type;
+    switchNavView(name) {
+      this.navViewName = name;
+    },
+    switchNavItem(event) {
+      this.store.filesTag = event.target.innerText;
     }
-  }
+  },
 }
 </script>