How can i make an component in Vue js to never delete the data i added to it? When i switch routes the component delete all the data it got

Question

I working on a webshop in Vue js, and when i add products i use event bus and then i add the products to the CartComponent by event bus. And its working, but when i go back and add a new product or just go back so the page reload all the data in my CartComponent is deleted. How can i do so its never delete the data it got?

I have tried to surround the component with

<keep-alive>
<CartComponent />
</keep-alive>

But thats not working. Can someone tell me how to do so the component not delete the data when i switch routes?

Answer 1

The bus is a communication hub, it does not store the information for you.

You have a couple of ways of tackling this:

• implement your own module where you store this information. When you update the cart also update your module. Or
• use Vuex, which as a store implementation. All your info should flow thru the store. It is persistent and globally available. More about Vuex here

I highly recommend using Vuex.