Armezenando número de página com Pinia
Olá, sou novo no TabNews e gostaria de mostrar uma parte de um projeto de Ecommerce com Nuxt e Node (com Typescript) que estou fazendo, e ainda pedir sugestões para melhorar esse código.
Essa é a home page do projeto por enquanto:
A query do banco inclue paginação, que retorna os dados dos produtos assim (retorna ao todo 8 produtos por página):
{
"response"[
"product1":{
dados...
},
"product2":{
dados...
},
"product3":{
dados...
},
"product4":{
dados...
}
]
}
resolvi usar o Pinia para gerir o estado e contexto da página da home, e ficou assim:
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 1 }
},
actions: {
increment() {
this.count++
},
decrement() {
this.count--
}
},
})
e usei no template e executei a seguinte função:
<div class="h-14 text-center">
<h1>Página {{ page.count }}</h1>
<button @click="decrement">Anterior</button>
<button @click="update">Próximo</button>
</div>
e combinei Script Setup com Script TS assim:
<script setup lang="ts">
import { useCounterStore } from '~/store/usePageStore'
const page = useCounterStore()
function incrementCount() {
page.increment()
}
function decrementCount() {
page.decrement()
}
defineExpose({
page,
incrementCount,
decrementCount
})
</script>
async update() {
this.incrementCount()
const pageNum = this.page.count
const response = await fetch(`http://localhost:4000/api/product/find/page/${pageNum}/all`);
const data = await response.json();
this.products = data.response;
},
async decrement() {
this.decrementCount()
const pageNum = this.page.count
const response = await fetch(`http://localhost:4000/api/product/find/page/${pageNum}/all`);
const data = await response.json();
this.products = data.response;
}
meu próximo passo é criar um store para as categorias, que recebem uma array com uma ou mais categorias (o all na query retorna todos os produtos), aceito sugestões para conseguir uma forma de armezenar array de strings usando Pinia.