Working with Vuex: Simplifying state management by accessing multiple state objects with a single update mutation/action

I am facing a challenge with updating objects containing different strings using a single mutation and action in my project. Currently, I am attempting to extract a string from an input field's value and name, using the name as the object property to dynamically alter the state. However, I am struggling to determine how to access the correct object property based on the input name string.

Below is the code snippet I am working with:

store.js

info: {
   fullName: '',
}

...

mutations: {
   updateStateObject(state, object){
      state.info.object["name"]
   }

actions: {
   updateStateObject(store, object){
      store.commit('updateStateObject', object);
}

info.vue

updateStateObject(e){
    this.$store.dispatch(this.store+'/updateStateObject', {name: e.target.name, value: e.target.value)}

Manually setting

state.info.["inputFieldName"] = object.value
works well, but I aim to invoke the updateStateObject method from the vue file using all input fields and accessing the correct property field in the state object based on the input field name. How can I achieve this successfully?

Answer №1

Based on my understanding, the object has a name and value key. To update the state object, you can use the following code:

updateStateObject(state, object){
   state.data[object.name] = object.value;
}

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

Creating a tree structure from a one-dimensional array with the help of dual data tables in JavaScript

I'm struggling to create a tree structure from a flat array using two Mock data tables in JSON. The table should match the unique IDs to determine the hierarchy between them. JSON with Groups DB array example: { "group": [ { "groupName" ...

Proceed to the section with modal

My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...

Is there a way to enhance the Download File dialog with an additional option?

I want to develop an extension for a specific file type, and I'm interested in including a "Send to MyAddonName" feature in the download file dialog, alongside the "Open with" and "Save file" options. Just to clarify, I don't mean the Download Ma ...

Tips for effectively utilizing vue-draggable (or Sortable JS) within a v-data-table using the powerful combination of Vuetify 2 and Vue JS 2

I'm currently experimenting with integrating vue-draggable into Vuetify's v-data-table based on the instructions provided in this article : https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684 The article mentions : "The main o ...

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

Encountering issues with loading JavaScript only on specific pages in Internet Explorer. Safari, Firefox, and Chrome render the page correctly. Debugging revealed the following errors: 1) No relay set (used as window.postMessage targetOrigin), cannot send ...

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example https:// codepen.io/ducktectiveQuack/pen/mPGMRZ I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol) My goal is to have the hamburger men ...

Refine object array by applying multiple filters based on various values

Currently, I have an array of objects that I need to filter based on user input. For example, if a user enters "Red Shirt," I want to only return entries with values like {color: "red", clothingType: "shirt"} rather than {color: "red", clothingType: "scar ...

Ways to update a JSON object within an array of objects

I've got an array of objects // Extracted from the database $scope.users = [{"$id":"1","UserID":3,"Name":"A","Selected":false},{"$id":"2","UserID":4,"Name":"B","Selected":false},{"$id":"3","UserID":5,"Name":"C","Selected":false},{"$id":"4","UserID":6 ...

Having trouble getting the expected transition effects to work with Vue.js

Currently, I have a display of lists of items through the use of v-for. Initially, only the summary section of each item is visible. Upon clicking on an item, the details section is supposed to appear. This functionality is achieved by adding or removing ...

Unable to change the name of the file using ngx-awesome-uploader

Currently, I am utilizing https://www.npmjs.com/package/@sleiss/ngx-awesome-uploader and facing an issue regarding renaming files before uploading them. Upon reviewing the available methods, it appears that there is no option for file renaming. While I c ...

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

Replicating the existing div content into a textarea

I wanted to create a tool for my workplace as a learning project in html, CSS and JS. It's a timer that tracks how long I spend on tasks. Currently, I have the timer resetting itself but I'm facing an issue where the paused time is not being log ...

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

While working in Vue with BootstrapVue, I encountered a problem where the bottom 2 tooltips that I am using both appear on the button targeted by the click to mask this value button. The tooltip containing the SSN is also only appearing on top of the butto ...

Changing the colors of multiple buttons in a React Redux form: a step-by-step guide

When using Redux Form Wizard on the second page, I have two buttons that ask for the user's gender - Male or Female. The goal is to make it so that when a user clicks on either button, only that specific button will turn orange from black text. You ...

What could be the reason for the inability to generate the response using response.writeHead and response.write functions?

I recently started learning about node.js and I'm facing an issue with the code inside the if and else loop for the '/socket.html' case. Despite my efforts, I always get a 200 status code and a blank response when accessing the URL localhost ...

Oops! It seems like there was an issue trying to access a property that doesn't exist (specifically, the

Encountering an error on the HomeScreen of my project I aim to manipulate the state of my HomeScreen Page using redux. The data is fetched from an API (an array of items) and then displayed on the screen. However, despite all these processes, an error me ...

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

Is it necessary to validate input for a login form? Some may argue that it creates unnecessary overhead and introduces concerns about an excess of javascript

While working on input validation for my registration form, the idea of implementing it on my login form also crossed my mind. My login form only requires an email and password. I'm considering validating whether the email entered is a valid email add ...

What advantages can be gained from having multiple package.json files within a single application?

Embarking on the journey of creating my inaugural full react web application entirely from scratch. Previously, I've mainly worked on assignments that were partially pre-made for me. While setting up my project, I couldn't help but notice that I ...

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...