Is there a way to modify the value of an object in a Vuex store using actions in Vue.js?

Question

Is there a way to modify the value of an object in a Vuex store using actions in Vue.js?

I have data stored in an array within the state and I need to update a specific object. How can I change the value of the object with id 1 to true using Vuex actions?

state.js

const array=[]

mutations.js

storeArray(state, data) {
    state.array = data;
  }

actions.js

async modifyValue({ state, dispatch, commit }, id) {
    const item = await state.array[id].value;

    await commit('storeArray', { value: true });

  },

The array's current structure is

[{
    id: "1",
    value: 'false'
}, {
    id: "2",
    value: 'true'
}]

javascript vue.js vuex

Answer 1

Answer №1

Prior to making any changes, it is essential to have knowledge of both the id and value of the new array. To locate and modify the desired object within the state array, you can utilize the mutation outlined in the following example:

const store = new Vuex.Store({
  state: {
    objects: [{ id: 1, value: true }, { id: 2, value: true }]    
  },
  mutations: {
    changeObjectValue (state, { id, value }) {
        const found = state.objects.find(item => item.id === id);
        found.value = value;               
    },
  },
});

By following this approach, you can execute a commit within a single action like so:

store.commit('changeObjectValue', {id: 2, value: false});

To see this example in action, check out plnkr.

Answer 2

Prior to making any changes, it is essential to have knowledge of both the id and value of the new array. To locate and modify the desired object within the state array, you can utilize the mutation outlined in the following example:

const store = new Vuex.Store({
  state: {
    objects: [{ id: 1, value: true }, { id: 2, value: true }]    
  },
  mutations: {
    changeObjectValue (state, { id, value }) {
        const found = state.objects.find(item => item.id === id);
        found.value = value;               
    },
  },
});

By following this approach, you can execute a commit within a single action like so:

store.commit('changeObjectValue', {id: 2, value: false});

To see this example in action, check out plnkr.

Is there a way to modify the value of an object in a Vuex store using actions in Vue.js?

Answer №1

Similar questions

Refresh the copyright year by syncing with a time server

Combining JavaScript JSON objects with corresponding parameters

Tips for establishing optimal parameters for an object's dynamic property

Issue with MomentJS inBetween function consistently displaying incorrect results

Tips for refreshing the page without losing the values of variables

Leverage cookies within a custom service in AngularJS

AngularJS routing not rendering the correct view

Is the `visibility: hidden` property not functioning as expected?

What is the best way to trigger the Vue.js ApolloClient middleware to run again?

Interactive image map with hover effects and external image swapping placed beyond the container

RegEx for constraining string length

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

I'm running into some issues with flexbox and I'm in need of some assistance to find

How to programmatically update one input value in AngularJS and trigger validation as if it was manually entered by the user?

Guide to accessing the content within an h1 tag with JavaScript

The custom attribute in jQuery does not seem to be functioning properly when used with the

Creating Layouts with Bootstrap 3

Navigate through each file or image within a directory using Angular

Sorting two different divisions is an example

Creating responsive HTML page text and table with the use of JavaScript