Vue Js 3 not keeping Pinia global state

Question

I'm working on a project as a little online store. I'm using Pinia to keep the data i'm fetching as an array for the products and other things. Now, I don't know why but the state doesn't keep up. I'm using routing and components to have different pages. In the home you can choose a product and view its page, then you can add the product to your cart. Visiting the cart page, it shows the product. If you go on previous page, the cart still keeps the product. Instead, if you back 2 pages (the home) the cart list becomes empty. This is not the case when browsing through home and cart. It only happens when visiting a product page or going back until the first page. I tried searching for solutions online but found nothing. This is the repo, if you can check... https://github.com/leorob88/kreas/tree/main/src

Answer 1

The root cause of your issue is the use of <a> tags in your code to navigate between the Product page and the Details page. You should use <router-link> tags instead. The native anchor tags cause navigations to completely reload the page, which results in loss of state. When vue-router controls the navigation the components reactively switch without having to reload the page and maintains the state of your store.

<a :href="['/details/' + props.id]">

should be

<router-link :to="'/details/' + props.id">