Vue + Pinia data storage and retrieval

Question

I'm studying Vue and Pinia. I ran into such a problem that I don't know how to work better with data on the user side. On the main page, I display categories and auction items, when you go to the catalog page for a certain category, data about auction items remain in the store and are also displayed on this page, although they may not belong to this category. Which approach is better to use when working with data?

I have such a 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);
    },
  },
});

I understand that the problem is very easily solved by changing this part of the code. But I don't want to contact the server every time the catalog page is changed, but first check the data on the user part.

updateProducts(payload: PageableType<Product>) {
      this.pages.push(payload);
    },

Does it make sense to create a bunch of variables in State for each criterion (Auction, Products in a certain category, Products suitable for a certain filter). I will be grateful for any help!

Answer 1

You need to clear the pages state "manually".

1: Create an action, something like

clearPages() { this.pages = [] }

2: Call this action whenever the route to that page changes. Depending on your design, either when you enter the page or when you leave, or both. This can be done in the router file, where you define the route, or in the component. Read more about Navigation guards to see how to get this done.