Basic store

web/src/App.vue

@@ -1,7 +1,13 @@
 <template>
   <v-app>
-    <v-main><RouterView /> </v-main>
+    <v-main><RouterView /></v-main>
   </v-app>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useAppStore } from "./store/app";
+
+const appStore = useAppStore();
+
+appStore.fetchMe();
+</script>

web/src/layouts/default/View.vue

@@ -4,16 +4,24 @@
 
     <v-app-bar>
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-
+      <v-avatar rounded>
+        <v-img :src="me?.thumbnailPhoto" />
+      </v-avatar>
       <v-toolbar-title>Application</v-toolbar-title>
     </v-app-bar>
 
-    <v-main> <router-view /> </v-main>
+    <v-main>
+      <router-view />
+    </v-main>
   </v-app>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 
+import { useAppStore } from "@/store/app";
+
+const { me } = useAppStore();
+
 const drawer = ref(true);
 </script>

web/src/store/app.ts

@@ -1,8 +1,27 @@
 // Utilities
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
+import { api } from "@/api";
+import { useRouter } from "vue-router";
 
-export const useAppStore = defineStore('app', {
+export const useAppStore = defineStore("app", {
   state: () => ({
-    //
+    me: null,
+    printers: [],
   }),
-})
+
+  actions: {
+    async fetchPrinters() {
+      this.printers = await api("printer", { method: "GET" });
+    },
+
+    async fetchMe() {
+      const router = useRouter();
+
+      try {
+        this.me = await api("me", { method: "GET" });
+      } catch (error) {
+        router.push({ name: "Login" });
+      }
+    },
+  },
+});

web/src/views/Home.vue

@@ -1,23 +1,7 @@
 <template>
   <div>
     <h1>Home</h1>
-    {{ printers }}
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { api } from "@/api";
-import { ref } from "vue";
-
-const printers = ref([]);
-
-async function getPrinters() {
-  const data = await api("printer", {
-    method: "GET",
-  });
-
-  printers.value = data;
-}
-
-getPrinters();
-</script>