esta es la primera vez que uso pinia y estoy tratando de implementar una tienda de carros de compras. Tengo una página donde agrego artículos a mi tienda de carritos de compras y otra donde quiero mostrarlos, sin embargo, cuando navego a la página del carrito de compras (donde quiero mostrarlos) mi estado está completamente vacío. Fue mi entendimiento de pinia que mi estado se trasladaría de una página a otra. estoy usando vue3

Definición de mi tienda

 import { defineStore } from "pinia"; export const shoppingCartStore = defineStore({ id: "shoppingCart", state: () => ({ products: {}, productData: {}, totalPrice: 0.0, numberOfProducts: 0 }), actions: ... (to add and remove items from the store) addProduct(product,amount) { if (product.priceid in this.products){ this.products[product.priceid] += amount } else{ this.products[product.priceid] = amount this.productData[product.priceid] = product } } }, });

La página donde agrego artículos a mi carrito de compras:

 import { shoppingCartStore } from '@/stores/shoppingCart.js' export default { setup(){ const shoppingCart = shoppingCartStore() return { shoppingCart } }, ... // this is how I add items to my shoppingcart (it is in a function I just left all the other code out for simplicity this.shoppingCart.addProduct(product,1) ...

La página donde quiero mostrar mi carrito de compras:

 import { shoppingCartStore } from '@/stores/shoppingCart.js' export default { setup(){ const shoppingCart = shoppingCartStore() return { shoppingCart } },

main.js (así es como instalo Pinia)

 ... let pinia = createPinia(); app.use(pinia); ...

Cuando estaba buscando este error, encontré esta discusión de github donde alguien explica que debería funcionar como si lo estuviera usando, pero para mí no es así.

Gracias de antemano por cualquier ayuda