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 под каждый критерий (Аукционные, Товары в определенной категории, Товары подходящие под определенный фильтр). Буду благодарен любой помощи!


Ответы (0 шт):