Ways to transfer data from a component to the Vue store?

One thing I am struggling with is setting data from my component to the store.

    methods: { // Inside my component
          ...mapMutations('lists', ['setContactListName']),// Importing function from the store
          viewHandler (id, item) { // Handler function
            this.$router.push(`/company/sample-contact/${id}`);
            this.setContactListName(item); // Passing data to the function
          }
        }

    state() { // Store setup
        return {
          contactListName: {}
        };
      },
    mutations:{
     setContactListName (state, payload) {// Mutation function
          state.contactListName = payload;
        }
    }

Even after clicking, nothing seems to happen - there are no errors in the console.

Answer №1

functions: { // custom component
  ...mapMutations(['setContactListName']), //bring in method from the store
  viewHandler(id, item) { // function to handle view
    this.$router.push(`/company/sample-contact/${id}`);
    this.setContactListName(item); //send data to the method
  }
}

alternatively, you can use this.$store.commit

functions: { // custom component
  viewHandler(id, item) { // function to handle view
    this.$router.push(`/company/sample-contact/${id}`);
    this.$store.commit('setContactListName', item);
  }
}

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

"Step-by-step guide to updating user information in MongoDB with the help of node.js

I have been working on a basic express app with MongoDB integration, allowing users to register, log in, and log out successfully. However, I am facing an issue when attempting to implement the functionality to edit user data. The code runs without any err ...

Angular's $routeProvider fails to navigate

I'm facing an issue with my Angular JS application where the $routeProvider doesn't load the template in the ng-view section. I have set up <html data-ng-app="myApp"> and <section data-ng-view></section. The template doesn't ...

When trying to link a Redis microservice with NestJS, the application becomes unresponsive

I am attempting to create a basic hybrid app following the guidance provided by Nest's documentation, but I have run into an issue where the app becomes unresponsive without any errors being thrown. main.ts import { NestFactory } from '@nestjs/c ...

Issue with Vuetify table customization not persisting on the first row after refreshing the page

Enhance Your Table Interface: <v-card :dark="true"> <v-card-title> <v-btn color="indigo" dark @click="initialize"><v-icon dark>refresh</v-icon></v-btn> <v-spacer></v-spacer> &l ...

How can I use JavaScript to retrieve the current time from the time.nist.gov NTP server?

Looking for guidance! I'm new to coding and would greatly appreciate detailed instructions and examples. I've been struggling for hours trying to solve this issue - the online resources I found have not been helpful at all. Unfortunately, I don&a ...

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

Attempting to transform Go Pro GYRO data into rotational values using Three.js

I am currently working on converting gyro data from Go Pro to Three.js coordinates in order to project the footage onto the inside of a sphere. My goal is to rotate the sphere and achieve 3D stabilization. https://i.sstatic.net/VYHV6.png The camera' ...

Rails is capable of responding to URLs with ajax crawling enabled

The google guide Explaining AJAX Applications Crawling explains how to structure your URL with a hash and ! to ensure your site is crawlable. An excellent example of this is the revamped Twitter. For instance, if you enter the URL: http://twitter.com/dini ...

Tips on eliminating flashing in React function components caused by async requests

When the React function component below renders JSX, it first checks AWS Cognito for the current user. Since the user data is fetched asynchronously, there may be a brief flash of markup for no user before the component re-renders with the content for a lo ...

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

How can one ensure the preservation of array values in React?

I'm struggling to mount a dynamic 'select' component in React due to an issue I encountered. Currently, I am using a 'for' loop to make API calls, but each iteration causes me to lose the previous values stored in the state. Is t ...

Uncovering the deepest levels of nested arrays and objects in JavaScript without any fancy libraries - a step-by-step guide!

I have been struggling to find a solution to a seemingly simple problem. Despite searching through various sites and resources, I have not been able to figure out how to iterate over the innermost levels of a doubly nested data structure. I have tried usin ...

Using JavaScript, reload the page once the data has been retrieved from an Excel spreadsheet

I'm facing an issue with my JavaScript code. Here's what I have: a = Excel.Workbooks.open("C:/work/ind12.xls").ActiveSheet.Cells.find("value"); if(a == null) document.getElementById('dateV ...

I must add and display a tab for permissions

I am currently using the material UI tab for my project. My goal is to display the tab only when the permission is set to true. I have successfully achieved this functionality, but the issue arises when the permission is false. It results in an error that ...

Submitting a Django form seamlessly without reloading the page

Currently using Django-Angular, I am attempting to submit a form and access the data on the backend. Despite achieving this, I have noticed that the page reloads when saving the form. Is there a way to achieve this without having the page render? forms.py ...

Employing a pair of interdependent v-select components to prevent any duplicate entries

I am currently working with two v-select boxes that share similar data. In my scenario, I extract attachments from an email and load them into an array. The issue I encountered is that the first select box should only allow the selection of one document, w ...

As the value steadily grows, it continues to rise without interruption

Even though I thought it was a simple issue, I am still struggling to solve it. What I need is for the output value to increment continuously when I click the button. Here is the code snippet I have been working on: $('.submit').on('click&a ...

What is the method for modifying the input element within a TextField component from MUI?

I have TextField elements in my application that appear to be too large. Upon inspection, I noticed that the input element within them has default padding that is too big.https://i.stack.imgur.com/C13hj.png My query is regarding how to adjust the styling ...

Using JavaScript to access array INDEX values sequentially

I have created a Stacked Bar chart using the Js library dhtmlx, and here is the generated output: The JSON data is structured as follows: var data = [ { "allocated":"20", "unallocated":"2", "day":"01/01/2014" }, { "allocated":"12", "unallocated": ...

The challenge with handling matrix arrays in Javascript

In my simplified drag and drop shopping cart project using jqueryui, I am encountering an issue with adding data (id, name, price) to an array. Despite trying various methods to add the data array to the main container, I consistently encounter the error ...