Is there a way to create a Vue.js component that retains the data I have added to it even when transitioning between routes? Currently, whenever I switch routes, the component deletes all the previously

I'm currently working on a webshop using Vue.js. When I add products, I utilize an event bus to pass the data to the CartComponent. Everything works as expected; however, if I navigate back or reload the page, all the data in my CartComponent gets deleted. How can I prevent this from happening?

I've attempted to wrap the component with 

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

But that doesn't seem to be solving the issue. Could someone advise me on how to ensure that the component retains its data even when changing routes?

javascriptvue.jscomponentsvue-componentwebshop

Answer №1

The bus acts as a central communication hub, but it does not retain the information for you.

There are a few approaches you can take to address this issue:

  • Create your own module where you can store and maintain this information. Make sure to update your custom module whenever you make changes to the cart. Alternatively,
  • Utilize Vuex, which serves as a robust store implementation. By channeling all your data through Vuex, you can ensure that it remains persistent and easily accessible throughout your application. You can learn more about Vuex here

I highly recommend incorporating Vuex into your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for the 'error' event to be triggered on the 'http.IncomingMessage' object during a node.js http.request?

There are 4 ways to encounter errors when calling http.get(url, cb): httpThrows() This error can occur due to a wrong format of the url or incorrect callback. function httpThrows() { try { http.get("www.missing-protocol.com", res => { ...

javascriptnode.jserror-handling

What is the process of creating a deep clone of the state and reverting back in Vuex?

Looking to create a snapshot or clone of an object property within the Vuex tree, make modifications, and have the option to revert back to the original snapshot. Context: In an application, users can test out changes before confirming them. Once confir ...

javascriptvue.jsclonevuexdeep-copy

Error in Nuxt build due to missing core-js dependencies in ./node_modules/bootstrap-vue/:variouspath

After working on my nuxt.js project, I encountered some less-than-friendly error messages. Despite performing a clean install by deleting package.lock and node_modules, as well as installing core-js@2 and @babel/runtime-corejs2, the errors persist. ERR ...

javascriptnpmnuxt.jsbootstrap-vuecore-js

fetch the image data from the clipboard

Hey there! Is it possible to use JavaScript to retrieve an image from the system clipboard (Windows/Mac) and paste it into a website? ...

javascript

Configuring Vue.js watchers inside a for loop

Exploring the dynamic addition of watchers in Vue.js. The discrepancy between what is desired and what actually happens is demonstrated below in the commented section. As a casual coder, I believe my issue lies more in grasping JavaScript basics rather t ...

javascriptvue.jsvuejs2

AngularJS Firebreath Component

Trying to integrate a FireBreath plugin object into an AngularJS view is causing an error when attempting to render the view: TypeError: Cannot read property 'nodeName' of undefined The object can be successfully included in the view using $com ...

javascriptc++angularjsfirebreath

Utilizing Workbox "debug" feature with VueJS PWAs through GenerateSW

Having trouble finding consistent documentation on configurations when using GenerateSW to build your WorkBox service-worker.js? Look no further. The Workbox debug mode can help you overcome many issues in the service-worker.js: workbox.setConfig({ deb ...

vue.jsprogressive-web-appsworkboxworkbox-webpack-pluginvue-pwa

The way in which the DOM responds to adding or deleting elements from its structure

My typical method for displaying a popup involves adding an empty div tag and a button to the webpage: <div id="popupDiv"></div> <input type="button" id="popupButton" /> I then use jQuery to handle a button click event, make an ajax cal ...

javascriptjqueryhtmldom

Invalid number of arguments for pure functions

I am currently facing an issue in angular2 (rc-1) where I am passing an array of strings to my function through component binding. However, when the array length exceeds 10, an error occurs: Unsupported number of argument for pure functions: 11 This erro ...

javascriptangularjstypescriptangular

What steps can be taken to utilize ajax for pagination and retrieving data efficiently?

My goal is to retrieve 3 specific data points from a webpage using the ajax get method. Here is the javascript code: <script type="text/javascript"> var busy = false; var limit = 15; var offset = 0; var id = 150; function displayRecords( ...

javascriptphpjqueryajax

Static Nuxt: Issue with Loading Fetched State on New Routes

I'm setting up a fully static web application using Nuxt, as detailed on this page In addition to the main site, I have a small blog that needs data from an API. To achieve this, I am utilizing the fetch hook. async fetch() { this.posts = await fet ...

vue.jsnuxt.jsserver-side-renderingstatic-site-generation

Creating TypeScript domain objects from JSON data received from a server within an Angular app

I am facing a common challenge in Angular / Typescript / JavaScript. I have created a simple class with fields and methods: class Rectangle { width: number; height: number; area(): number { return this.width * this.height; } } Next, I have a ...

javascriptangulartypescript

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Displayed below is a snippet of source code from an IONIC page dedicated to shapes and their information. Each shape on the page has two buttons associated with it: shape-properties-button and material-information-button. Is it possible to assign different ...

javascripthtmlangulartypescriptionic-framework

Ensure the footer remains fixed while scrolling

For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...

javascripthtmljquerycss

What is the best way to compare two 2D arrays in JavaScript?

Having an issue comparing two 2D arrays in javascript, looking to output "true" if the arrays are the same. This is the code I experimented with: ` function check(){ if (data.every() === solution.every()){ alert("example"); } else { ...

javascriptarrays2d

Incorporating JavaScript into a Rails Application

When I click on a link "link_to" in my rails app, I am attempting to trigger a JS file. To confirm that the asset pipeline is functioning correctly, I conducted a test with: $(document).ready(function() { alert("test"); }); The alert successfully po ...

javascriptjqueryruby-on-railsrubyturbolinks

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

Using regular expressions in JavaScript to extract the value following a colon, without including the colon itself

I've attempted using the tool, along with a similar stackoverflow question, but I'm still unable to solve or comprehend it. I hope someone here can shed some light on what I might be missing. I've provided as detailed and step-by-step examp ...

javascriptjqueryregex

Invert the order of the array in the JavaScript variable containing the JSON data

I have a JSON array stored in a variable in the following format: {"info": [ {"typeid": "877", "recid": "10", "repeaterid": "0", "pageid": "26966", "maxrecords": "1"}, {"typeid": "877", "recid": "11", "repeaterid": "0", "pageid": "26966", "maxrecords ...

javascriptjqueryarraysjson

The alert box is not displaying, only the text within the tags is visible

Trying to implement an alert message for logged-in users. A successful login will trigger a success message, while incorrect username or password will display an error. function showMessage(response) { if (response.statusLogged == "Success login") { ...

javascriptjqueryhtml