Vue + Pinia хранение и получение данных
Всем привет, изучаю Vue и Pinia. Столкнулся с такой проблемой, что не знаю как лучше работать с данными на стороне пользовательской части. На главной странице у меня отображаются категории и аукционный товары, при переходе на страницу каталога по определенной категории, данные об аукционных товарах остаются в store и так же отображаются на данной странице при том что они могут и не относится к данной категории. Какой подход при работе с данными лучше использовать?
Есть у меня такой Store.
import { defineStore } from "pinia";
import { ProductState } from "@/entities/product/api/model/ProductState";
import { ProductActions } from "@/entities/product/api/model/Actions";
import { Product } from "@/entities/product/model/Product";
import { PageableType } from "@/shared/pageable/pageableType";
import Characteristics from "@/entities/product/model/Characteristics";
import categoriesCard from "@/entities/categories/ui/CategoriesCard.vue";
export const storeModule = defineStore("product", {
state: (): ProductState => ({
product: {} as Product,
pages: [] as PageableType<Product>[],
isRequestLoading: true,
}),
getters: {
getProducts(state) {
return (pageNumber: number) =>
state.pages.find((value) => value.number === pageNumber);
},
},
actions: {
async loadProduct(pageNumber: number, pageSize: number) {
this.isRequestLoading = true;
const res = await ProductActions.loadProduct(pageNumber, pageSize);
console.log(res);
this.updateProducts(res);
this.isRequestLoading = false;
},
async loadProductByCategories(
pageNumber: number,
pageSize: number,
categoriesId: number
) {
this.isRequestLoading = true;
const res = await ProductActions.loadProductByCategories(
pageNumber,
pageSize,
categoriesId
);
console.log(res);
this.updateProducts(res);
this.isRequestLoading = false;
},
async loadProductInPromotion(pageNumber: number, pageSize: number) {
this.isRequestLoading = true;
const res = await ProductActions.loadProductInPromotion(
pageNumber,
pageSize
);
this.updateProducts(res);
this.isRequestLoading = false;
},
updateProducts(payload: PageableType<Product>) {
this.pages.push(payload);
},
},
});
Понимаю что проблема очень легко решается изменением данной части кода. Но я не хочу каждый раз обращаться на сервер при изменении страницы каталога, а сначала проверять данные на пользовательской части.
updateProducts(payload: PageableType<Product>) {
this.pages.push(payload);
},
Есть ли смысл создавать кучу переменных в State под каждый критерий (Аукционные, Товары в определенной категории, Товары подходящие под определенный фильтр). Буду благодарен любой помощи!