Utilisateurs (composables)
Pour récuperer des données exterieures, on utilisera useFetch, qui empechera que la requete soit lancée deux fois, une sur le serveur et une sur le client.
Cependant, elle sera lancée autant de fois que de composants l'utilisent
UsersList
<template>
<h2>User Ids</h2>
<ul>
<li v-for="id in userIds" :key="id">
<NuxtLink :to="`/users/${id}`">
<UButton>User {{ id }}</UButton>
</NuxtLink>
</li>
</ul>
</template>
<script setup lang="ts">
const { data: userIds } = useUserIds();
</script>
UsersComposable
export const useUser = (id: string) => {
return useFetch(`/api/users/${id}`, {
method: "GET",
});
};
export const useUserIds = () => {
return useFetch("/api/users", {
method: "GET",
});
};
Utilisateurs (stores)
Si une donnée récupérée d'une API doit être utilisée a plusieurs endroits, on aura tendance à la stocker dans un store Pinia.
La fonction callOnce remplace d'une certaine façon le onMounted et garanti que la fonction ne sera appellée qu'une fois entre le client et le serveur.
Pour récuperer des données sans useFetch, on peut utiliser $fetch qui est une abstraction de fetch en client ou server.
UsersStoreList
<template>
<h2>User Ids</h2>
<ul>
<li v-for="id in userStore.userIds" :key="id">
<NuxtLink :to="`/users/${id}`">
<UButton>User {{ id }}</UButton>
</NuxtLink>
</li>
</ul>
</template>
<script setup lang="ts">
const userStore = useUsersStore();
await callOnce("user", () => userStore.fetchUserIds(), '$qeAUR2Yc8R');
</script>
UsersStore
export const useUsersStore = defineStore("users", {
state: () => ({
userIds: [] as string[],
users: {} as Record<string, any>,
}),
getters: {
user: (state) => (id: string) => state.users[id],
},
actions: {
// Missing state/error management here
async fetchUserIds() {
this.userIds = await $fetch("/api/users");
},
async fetchUser(id: string) {
this.users[id] = await $fetch(`/api/users/${id}`);
},
},
});