Refresh the component data according to the vuex state

In order to streamline my workflow, I am developing a single admin panel that will be used for managing multiple web shops. To ensure that I can keep track of which website I am currently working on, I have implemented a website object in my vuex state. This object can be modified by clicking a button that triggers an action within the state.

The admin dashboard page is designed to display statistics specific to the selected website. Currently, the data for these statistics is being stored within the page component itself.

I have encountered a problem when switching between websites while on the dashboard page. Since the URL remains the same for all dashboards, the statistics do not update accordingly. It seems that vue-router does not detect a change in the URL, therefore it doesn't reload the component. However, I would like the component to refresh automatically when the website is changed. Alternatively, I am looking for a way to identify when a website switch occurs so that I can manually trigger the retrieval of new data from the AJAX source.

As a relatively new user of Vue.js, I have been unable to find a solution to this issue despite having started using the framework a few weeks ago.

javascriptvue.jsvuexvue-router

Answer №1

If you want to receive updates on Vuex mutations and actions, you can subscribe to them by following the link: https://vuex.vuejs.org/api/#subscribe

In your admin dashboard component, you can include the following code inside the created hook as long as you have injected the Vuex store:

created: function() {
    this.unsubscribe = this.$store.subscribe((action, state) => {
        if (action.type === 'changeWebsite') {  // Replace with your action name
            this.updateWebsiteData(action.payload); // Call a method to update component data 
        }
    });
},
beforeDestroy: function() {
    this.unsubscribe();
},

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

The RC-dock library's 'DockLayout' is not compatible with JSX components. The instance type 'DockLayout' is not a valid JSX element and cannot be used as such

Despite encountering similar questions, none of the provided answers seem to address the issue within my codebase. My project utilizes React 17, Mui v5, and TS v4. I attempted to integrate a basic component from an external package called rc-dock. I simply ...

javascriptreactjstypescriptmaterial-uireact-dnd

Navigating to an Element in React's Document Object Model

Using React 16.4, I am faced with the need to scroll to a specific DOM element within the application. Since refs are deprecated in React, I am on a quest to find the most elegant solution for this problem. However, I find it challenging to come up with a ...

javascriptreactjs

Guide on how to implement a file upload feature using only JavaScript and the FileReader API

Allow me to explain the issue I'm facing. To give you some context, I've been working on a forum web application. Lately, I've been trying to enable users to choose a photo from their local file system during sign up. The idea is that once a ...

javascriptformsfilefilereader

React component unmounts but listener remains attached

After developing a SPA using react.js, I have incorporated react-router-dom, react-redux, and various other modules. The routes defined in my application: const allRoutes = [ { path: "/Intro", name: "Intro", component: Intro }, ...

javascriptreactjsreact-routerreact-redux

Retrieving a map using latitude and longitude coordinates saved in a database

I have a webpage with an embedded Google Map and a dropdown list of cities. The latitude and longitude values for each city are stored in a database. When a user selects a city from the dropdown list and clicks submit, I want the map to load with the corre ...

javascriptphpgoogle-maps

Transmit a message from the background.js script to the popup window

Currently, I am looking to integrate FCM (Firebase Cloud Messaging) into my chrome extension. After conducting thorough research, I have discovered that the most efficient way to implement FCM is by utilizing the old API chrome.gcm. So far, this method has ...

javascriptvue.jsgoogle-chrome-extensionchrome-extension-manifest-v3

Archive a webpage with refreshed content using ajax

Is there a way to save a webpage that has been updated through an ajax request? I'm looking to preserve basecamp message threads, but exporting is not possible since I am not the account owner. When attempting to use the javascript command below: jav ...

javascriptajaxsavebasecamp

How to unselect a radio button in Vue using a button, similar to using vanilla JavaScript

Looking to translate this vanilla JavaScript code into Vue, here's the original: const radio = document.querySelector('#radio'); const boton = document.querySelector('#boton'); boton.addEventListener('click', () => { ...

javascriptvue.js

Revising the input value by updating the properties

After clicking on the Reset link, I encounter an issue where the input value fails to update properly. class DiscountEditor extends Component { render() { <div className="inline field"> <a className="ui reset" onClick={thi ...

javascriptreactjs

Achieve a scrolling effect for just a specific section of an HTML page

Hey there! I'm currently working on adding scrolling text along the side of a webpage for a specific section. My goal is to have three different sections, each with text that stops scrolling when you reach it and then transitions to the next section o ...

javascripthtmlcss

Implementing Dynamic Script Injection in Angular Controllers for Enhanced HTML Functionality

I'm a total beginner when it comes to Angular and frontend development, so please bear with me if my question seems basic: In my controller, I have the following code where I am populating the $window.user data that is being used in the script [2] ad ...

javascripthtmlangularjs

The sorting feature for isotopes is malfunctioning following the addition of a new div element

Isotope was utilized for sorting divs based on attribute values, however, a problem arises when a new div is added or an existing div is edited. The sorting functionality does not work properly in such cases, as the newly created or edited div is placed at ...

javascriptjquery-isotope

Performance problem with React-Native for-looping through a large array size

I'm currently facing a performance issue with the search function in my react-native app. The search involves scanning through an array of 15,000 elements for specific keywords. Surprisingly, the search performs well and quickly on Android devices, bu ...

javascriptandroidiosarraysreact-native

What is the best approach to removing a component by utilizing the children prop in React?

I am currently working on a specific scenario: In my project, I have a component called Foo with a property named bar If the bar property is set to true, then I need to display the Bar component that is nested inside the Foo component If the bar prop ...

javascriptreactjsjsx

Incorporating jQuery into Rails 6.1

I encountered some difficulties while setting up jQuery in rails 6.1, even though I believe it's configured correctly. Below are the steps I've taken: Installed yarn add jquery 2. In config/webpack/environments.js, I made the following changes ...

javascriptjquerynode.jsruby-on-railswebpack

Transform the Node.js requests for both GET and POST methods to utilize Ajax

I am new to JavaScript and am currently learning how to send requests from a Node.js backend using Ajax for GET/POST operations. My backend is connected to a MySQL database and I have been studying some tutorials to gain a better understanding. Here is an ...

javascriptjquerymysqlnode.jsajax

Tips for integrating JavaScript libraries with TypeScript

I'm looking to add the 'react-keydown' module to my project, but I'm having trouble finding typings for it. Can someone guide me on how to integrate this module into my TypeScript project? ...

javascripttypescript

Obtain the name of the client's computer within a web-based application

I am working on a Java web application that requires the computer name of clients connecting to it. Initially, I attempted to retrieve this information using JavaScript and store it in a hidden form field. However, I discovered that JavaScript does not hav ...

javascriptjavafirefoxappletclient

What are some strategies for blocking URL access to a controller's method in Rails 3?

My goal is to enhance my Rails 3 application by integrating Javascript/jQuery code that retrieves data from the server and updates the page based on the fetched information. I am considering implementing jQuery's $.get() method for this purpose: $.g ...

javascriptjqueryruby-on-railsajaxruby-on-rails-3

Scanning barcode and Qrcode with Angular js HTML5 for seamless integration

Looking to scan Barcode and Qrcode on Android, iPhone, and iPad devices for a project that is built on AngularJS and HTML5 as a mobile website. The requirement is not to download any third-party native application on the device, ruling out the use of nati ...

javascriptjqueryhtmlangularjs