CODEWITHSUNDEEP
vue.jsvuejs3vuexvuex4
Jtrom2021
Jtrom2021

Reputation: 41

Vuex Vue3 mutation on store modifies incorrect state item

I am trying to commit a change to a state in the store but I am having trouble with the mutation only changing the value that I want to be changed.

Here is a sample of my state (tableMap) before the mutation:

{
    "1": {
       "prop1":0,
       "prop2":0,
       "personMap":{
         "0001":{
           "choice":null
        },
    "2": {
       "prop1":0,
       "prop2":0,
       "personMap":{
         "0001":{
           "choice":null
        },
    // ...
}

The mutation function:

updateTableMap: function (state, value) {
  const instance = value.instance; // value passed in for this example is "1"
  const personID = value.personID; // value passed in for this example is "0001"
  const choice = value.choice; // value passed in for this example is '0'
  console.log(state.tableMap) // result is top block of code
  state.tableMap[instance].personMap[personID].choice = choice;
  console.log(state.tableMap) // result is bottom block of code
  // ...
}

I thought that I would only be updating one value with function call. However, this is what tableMap looks like after the mutation:

{
    "1": {
       "prop1":0,
       "prop2":0,
       "personMap":{
         "0001":{
           "choice": 0
        },
    "2": {
       "prop1":0,
       "prop2":0,
       "personMap":{
         "0001":{
           "choice": 0
        },
    // ...
}

As you can see, although I specifically define what instance I want to be mutated, somehow in both instance 1 and 2, the choice for the person with id "0001" are changed. I would like it if only the the choice for the specific instance I pass in changes. How can I do this?

Upvotes: 0

Views: 67

Answers (0)

Related Questions