Replace Chuck Norris API with lists endpoint

The commit replaces the Chuck Norris joke functionality with a new lists
feature that fetches data from a local API endpoint using auth tokens.
This commit is contained in:
2025-08-11 19:04:24 +02:00
parent bb08a62e5d
commit 3e55e82fb7
3 changed files with 24 additions and 38 deletions

View File

@@ -2,23 +2,9 @@
<v-container
class="fill-height d-flex flex-column align-center justify-center text-center"
>
<img
:src="norrisStore.response.icon_url"
alt="chuck norris"
size="64"
/>
<div class="mt-3">My Application's Home Page</div>
<div>
{{ norrisStore.response }}
{{ data }}
{{ status }}
{{ refreshToken }}
</div>
<div>
<v-btn color="primary" @click="refresh">Refresca token</v-btn>
</div>
<div>
<v-btn color="warning" @click="logout">Logout</v-btn>
{{ listasStore.listas }}
</div>
</v-container>
</template>
@@ -28,18 +14,12 @@ definePageMeta({
auth: true,
});
import { ref, onMounted } from "vue";
import { useChuckStore } from "~/stores/chuck";
import { useSystemStore } from "~/stores/system";
import { useListasStore } from "~/stores/listas";
const listasStore = useListasStore();
const systemStore = useSystemStore();
const norrisStore = useChuckStore();
const { data, status, refresh, refreshToken, signOut } = useAuth();
const logout = async () => {
await systemStore.deleteCookies();
await signOut({ callbackUrl: "/login" });
};
onMounted(async () => {
await norrisStore.getData();
await listasStore.getData();
});
</script>

View File

@@ -1,14 +0,0 @@
import { defineStore } from "pinia";
export const useChuckStore = defineStore("chuckNorris", {
state: () => ({
response: "",
}),
actions: {
async getData() {
const response = await fetch("https://api.chucknorris.io/jokes/random");
const data = await response.json();
this.response = data;
},
},
});

20
app/stores/listas.js Normal file
View File

@@ -0,0 +1,20 @@
import { defineStore } from "pinia";
const { token } = useAuth();
export const useListasStore = defineStore("listas", {
state: () => ({
listas: [],
}),
actions: {
async getData() {
const response = await fetch("http://127.0.0.1:8000/lista/", {
method: "GET",
headers: {
Authorization: `${token.value}`,
},
});
const data = await response.json();
this.listas = data;
},
},
});