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 $postLink() method in the controller is encountering a null value for this.$scope

class pageController { constructor($scope, MyEditableGrid) { this.$scope = $scope; this.MyEditableGrid = MyEditableGrid; this.myEditableGrid = { appScope: this.$scope, ..... } } $postLink ...

javascriptangularjs

Utilize environment variables to access system information when constructing an Angular 2 application

In order to build my Angular application, I want to utilize a single system variable. System Variable server_url = http://google.com This is how my Environment.ts file looks: export const environment = { production: false, serveUrl: 'http://so ...

javascriptangular

After receiving a data token from the server in one controller, how can I efficiently utilize that token in a different AngularJS controller?

In my adminSearchCtrl controller, I am receiving data from the server in the form of a token and want to pass that token to another controller named "adminViewCtrl". How can I achieve this? adminSearchCtrl.js $scope.getUserDetails = function(selectedUser ...

javascriptjqueryangularjsnode.js

What is the best approach for testing the TypeScript code below?

Testing the following code has been requested, although I am not familiar with it. import AWS from 'aws-sdk'; import db from './db'; async function uploadUserInfo(userID: number) { const user = db.findByPk(userID); if(!user) throw ...

javascriptnode.jstypescripttesting

The addition of the woocommerce_add_to_cart action is causing issues with the website's native add to cart

After creating a node express API that listens for post requests from the woocommerce_add_to_cart webhook, I noticed that the payload it receives is not very useful. body:{ action: 'woocommerce_add_to_cart', arg:'098uoijo098920sa489983jk&ap ...

javascriptphpajaxwoocommercewebhooks

Tips on how to increase and update the index value by 2 within an ngFor loop while maintaining a fixed format

I have a specific template layout that displays only two items in each row as shown below. I want to use the ngFor directive to iterate through them: <div class="row" *ngFor="let item of cityCodes; let i = index"> <div class="col-6" (click)= ...

javascriptarraysangulartypescriptangular2-template

Tips for running Scrapy and Selenium on a webpage that utilizes angular JavaScript to serve data

I have been working on a web scraper that follows this process: Visit site A -> click on the buy now button -> redirected to Amazon -> scrape data -> return to site A The issue I am facing is that the site is built using AngularJS, and I am having troubl ...

javascriptseleniumscrapy

Input field modified upon focus

I am currently using selectize js in my section to create a select box. My goal is to make the input editable after selecting an option when it is focused on. Check out the live demo: live demo HTML <label>Single selection <select id=" ...

javascripthtmljqueryselectize.js

Guide for displaying retrieved information on a Bootstrap Modal window following data submission in Yii2

I'm encountering an issue with a Modal popup that contains two fields. The first field is used to submit information and perform an internal database query, while the second field should display the returned data. Oddly enough, when testing the functi ...

javascriptajaxyii2pjax

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

Tips for ensuring session token verification remains intact upon reloading

I am currently in the process of developing a website using the Next.js framework and I am seeking advice on how to prevent the reload effect that occurs when transitioning from the login page back to the main page for just a fraction of a second. Below i ...

javascriptreactjstypescriptnext.jsreact-hooks

What is the best way to use jQuery's get function to load multiple files at once?

I am attempting to use jQuery's get function to load multiple files. Here is a basic example of what I am trying to achieve: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

javascriptjqueryajax

Dividing a sentence by spaces to isolate individual words

Recently, I encountered a challenging question that has me stuck. I am working on creating an HTML text box where the submitted text is processed by a function to check for any links. If a link is detected, it should be wrapped in anchor tags to make it cl ...

javascripthtmlanchorhyperlink

What are your thoughts on integrating PusherJS with Vue 3?

Looking for a way to track pusher events and automatically update the local state or refresh a component. This is my current method of monitoring pusher notifications: ... methods: { refreshSlider() { const pusher = new Pusher(process.env.VUE_AP ...

vue.jsvue-componentpusherpusher-js

React js: Changing Material-UI functional code to class component results in TypeError

After utilizing the material ui login page code, I discovered that it is a functional component. To meet my specific requirements, I decided to convert it into a class component. However, during the conversion process, an error was encountered: "Cannot ass ...

javascriptreactjsauthenticationmaterial-uimaterial-design

Analyzing JavaScript code coverage through unit testing with Jenkins and SonarQube

We have successfully implemented Jenkins/SonarQube to enforce a requirement that any new code committed by developers must have at least 70% unit test code coverage for Java. However, when it comes to applying the same rule for JavaScript, we encountered s ...

javascriptangularjsunit-testingjenkinssonarqube

Rearranging table rows with jQuery based on numerical values within child elements

I require assistance in sorting the rows of a table based on the numbers within certain anchor tags. Below is an example of the table structure: <table id="sortedtable" class="full"> <tbody> <tr> <th>Main tr ...

javascriptjquery

Angular template not refreshing automatically

Within my controller: $scope.deleteUser = function(user){ $.ajax({ url: "/users/" + user.id.toString(), method: "DELETE", success: function(result){ $scope.users = result["users"]; ...

javascripthtmlangularjsajax

Ways to alter the typography style if the text exceeds a certain length

I need some assistance with using Material UI in my ReactJs project with TypeScript. I am trying to decrease the font size of typography when the text exceeds 3 lines. Here is a snippet of my code: const checkFontSize =() => { if(text.leng ...

javascriptreactjsmaterial-ui

Unable to automatically prompt the button inside the iframe

In this scenario, an Iframe is automatically generated by a JavaScript script. I am looking to simulate a click by triggering a button, but unfortunately, it is not working as expected. You can view the code on JSFiddle. I have attempted various approache ...

javascriptjqueryhtmliframe