CODEWITHSUNDEEP
vue.jsvue-componentpiniaglobal-state
Roberto D V Leonardo
Roberto D V Leonardo

Reputation: 69

Vue Js 3 not keeping Pinia global state

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

Upvotes: 0

Views: 1237

Answers (2)

Askar
Askar

Reputation: 574

If you are using a button element, do as follows:

<router-link :to="`/`">
  <button>Go Home</button>
</router-link>

Consider using backtick inside the value of to attribute.

Upvotes: 0

yoduh
yoduh

Reputation: 14709

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">

Upvotes: 6

Related Questions