ben nuxt 3 uygulamamda pinia kullanıyorum ve
store/bookStore.ts
import { defineStore } from 'pinia'
import type { Book } from '~/types'
export const useBookStore = defineStore({
id: 'BookStore',
state: () => ({
books: [] as Book[],
isLoading: false as boolean
}),
actions: {
async getBooks() {
this.isLoading = true;
const { data, error } = await useFetch('/api/books');
if (error.value) {
console.error('Error fetching books:', error.value.message);
this.isLoading = true;
} else {
this.books = data.value || [];
this.isLoading = false;
}
}
}
})
pages/index.vue
<script lang="ts" setup>
const bookStore = useBookStore();
const selectedFilter = ref<"latest" | "best">("latest");
const openAccordionIndex = ref<number>(0);
// Fetch the books
bookStore.getBooks();
// Methods
const selectFilter = (filter: "latest" | "best") => {
selectedFilter.value = filter;
};
const toggleAccordion = (index: number) => {
if (openAccordionIndex.value === index) {
openAccordionIndex.value = -1;
} else {
openAccordionIndex.value = index;
}
};
// Computed
const filteredBooks = computed(() => {
const copiedBooks = [...bookStore.books];
if (selectedFilter.value === "latest") {
return copiedBooks
.sort(
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
)
.slice(0, 5);
} else if (selectedFilter.value === "best") {
return copiedBooks.sort((a, b) => b.rating - a.rating).slice(0, 5);
}
});
</script>
pages/books/index.vue
<script setup lang="ts">
import { useBookStore } from '~/store/bookStore';
const storeBooks = useBookStore();
const currentPage = ref<number>(1);
const itemsPerPage = ref<number>(8);
const totalPages = computed(() => Math.ceil(storeBooks.books.length / itemsPerPage.value));
const paginatedBooks = computed(() => {
const startIndex = (currentPage.value - 1) * itemsPerPage.value;
const endIndex = startIndex + itemsPerPage.value;
return storeBooks.books.slice(startIndex, endIndex);
});
// Fetch the books
storeBooks.getBooks();
const updatePage = (page: number) => {
currentPage.value = page;
};
</script>
her ikisinde de
// Fetch the books
storeBooks.getBooks();
bunu çağırıyorum fakat bu iki sayfaya da gittiğimde networkdan baktığımda istek atılıyor her girdiğimde fakat pinia kullanmamın sebebi bir kez datalar databaseden gelsin ve store (yani piniada) depolansın böylece her sayfaya girdiğimde istek atmasın piniadan alsın hepsini.
Ben app.vue de
<script setup>
import { useBookStore } from './store/bookStore';
const storeBooks = useBookStore();
// Fetch the books
storeBooks.getBooks();
</script>
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
böyle tanımlamakla çözdüm fakat en iyi çözüm bu mudur bilemiyorum.