Basic store
This commit is contained in:
parent
2ead863ace
commit
23c27da17e
|
@ -1,7 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app>
|
||||||
<v-main><RouterView /> </v-main>
|
<v-main><RouterView /></v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import { useAppStore } from "./store/app";
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
appStore.fetchMe();
|
||||||
|
</script>
|
||||||
|
|
|
@ -4,16 +4,24 @@
|
||||||
|
|
||||||
<v-app-bar>
|
<v-app-bar>
|
||||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
<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-toolbar-title>Application</v-toolbar-title>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
|
|
||||||
<v-main> <router-view /> </v-main>
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
import { useAppStore } from "@/store/app";
|
||||||
|
|
||||||
|
const { me } = useAppStore();
|
||||||
|
|
||||||
const drawer = ref(true);
|
const drawer = ref(true);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,8 +1,27 @@
|
||||||
// Utilities
|
// 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: () => ({
|
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" });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
@ -1,23 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
{{ printers }}
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user