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
Asked
Active
Viewed 59 times
0
-
Do not link to external sites for important information; please include relevant code _in your question_. – Darryl Noakes Jun 15 '23 at 03:34
-
I don't know...there is no relevant code, i mean, the relevant code is all the project code since i don't know in this case where the issue is located.. – Roberto D V Leonardo Jun 15 '23 at 07:34
-
That's fair, I guess :) – Darryl Noakes Jun 15 '23 at 17:36
1 Answers
2
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">
yoduh
- 7,074
- 2
- 11
- 21