this is my first time using pinia and I am trying to implement a shoppingcart store. I have a page where I add items to my shoppingcart store and another where I want to display them, however when I navigate to the shoppingcart page (where I want to display them) my state is completely empty. It was my understanding of pinia that my state would carry over from one page to another. I am using vue3

My store definition

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
      }
    }
  },
});

The page where I add items to my shoppingcart:

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) 
...

The page where I want to display my shoppingcart:

import { shoppingCartStore } from '@/stores/shoppingCart.js'

export default {
    setup(){
        const shoppingCart = shoppingCartStore()
        return { shoppingCart }
    },

main.js (this is how I instantiate Pinia)

...
let pinia = createPinia();

app.use(pinia);
...

When I was looking this error up I found this github discussion where someone explains that it should work like I am using it but for me it doesn't.

Thanks in advance for any help