Move boat data to store

src/components/models.ts

@@ -1,11 +1,3 @@
-export interface Boat {
-  id: number;
-  name: string;
-  class: string;
-  year: number;
-  imgsrc: string;
-}
-
 export interface test {
   totalCount: number;
 }

src/pages/BoatPage.vue

@@ -7,28 +7,7 @@
 <script lang="ts" setup>
 import BoatPreviewComponent from 'src/components/BoatPreviewComponent.vue';
 import { ref } from 'vue';
+import { useBoatStore } from 'src/stores/boat';
 
-const boats = ref([
+const boats = ref(useBoatStore().boats);
-  {
-    id: 1,
-    name: 'ProjectX',
-    class: 'J/27',
-    year: 1981,
-    imgsrc: '/src/assets/j27.png',
-  },
-  {
-    id: 2,
-    name: 'Take5',
-    class: 'J/27',
-    year: 1985,
-    imgsrc: '/src/assets/j27.png',
-  },
-  {
-    id: 3,
-    name: 'WeeBeestie',
-    class: 'Capri 25',
-    year: 1989,
-    imgsrc: '/src/assets/capri25.png',
-  },
-]);
 </script>

src/stores/auth.ts

@@ -2,7 +2,6 @@ import { defineStore } from 'pinia';
 import { ID, account } from 'boot/appwrite';
 import type { Models } from 'appwrite';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 export const useAuthStore = defineStore('auth', () => {
   const currentUser = ref<Models.User<Models.Preferences> | null>(null);

src/stores/boat.ts

@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia';
+
+// const boatSource = null;
+
+export interface Boat {
+  id: number;
+  name: string;
+  class: string;
+  year: number;
+  imgsrc: string;
+}
+
+const getSampleData = () => [
+  {
+    id: 1,
+    name: 'ProjectX',
+    class: 'J/27',
+    year: 1981,
+    imgsrc: '/src/assets/j27.png',
+  },
+  {
+    id: 2,
+    name: 'Take5',
+    class: 'J/27',
+    year: 1985,
+    imgsrc: '/src/assets/j27.png',
+  },
+  {
+    id: 3,
+    name: 'WeeBeestie',
+    class: 'Capri 25',
+    year: 1989,
+    imgsrc: '/src/assets/capri25.png',
+  },
+];
+
+export const useBoatStore = defineStore('boat', {
+  state: () => ({
+    boats: getSampleData(),
+  }),
+
+  getters: {},
+
+  actions: {
+    // update () {
+    // }
+  },
+});

src/stores/schedule/index.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+import state from './state';
+import * as getters from './getters';
+import * as mutations from './mutations';
+import * as actions from './actions';
+
+export const useScheduleStore = defineStore('schedule', {
+  state,
+  getters,
+  mutations,
+  actions,
+});

src/stores/schedule/schedule.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0
+  }),
+
+  getters: {
+    doubleCount (state) {
+      return state.counter * 2;
+    }
+  },
+
+  actions: {
+    increment () {
+      this.counter++;
+    }
+  }
+});