How do I dispatch an action to the correct key of a nested object in store.state in vuex?

Question

I have three buttons in my component that each have a specific data attribute so I can identify which button is clicked so I can then map the key to the correct property in the store state object. Each button is identical except for the data attribute as follows:

<ul class="list-items">
            <li v-for="(value, index) in boxSizesArray" :key="index">
              <label for="oatmeal">oatmeal</label>
              <button
                id="oatmeal"
                type="button"
                class="date-buttons"
                :value="index"
                **data-cookie="oatmeal"**
                @click="selectBoxSize(value, $event)"
              >
                <div>
                  <p>{{ value.boxes }} boxes,</p>
                  <span>{{ value.cookieQty }} cookies</span>
                </div>
              </button>
            </li>
          </ul>

The event handler, selectBoxSize, is where I am mapping to a key and then trying to dispatch the action. The first error that I have is that "property" throws an error as an unused var. I thought it could work as a key in "updateBoxSize" action. If my state object was flat, meaning chocolateChip, oatmeal, and campfire were not in the cookies object, I could set the correct value with:

this.$store.state.cookies[property] = cookieQty;

but I realize that that is not the correct way to mutate state.

selectBoxSize({ boxes, cookieQty, price }) {
      const cookieKeys = {
        chocolateChip: "chocolateChip",
        oatmeal: "oatmeal",
        campfire: "campfire"
      };
     // I map over the object to match the attribute to the key I need in state.
      let element = event.currentTarget.getAttribute("data-cookie");
      for (let key in cookieKeys) {
        if (element === key) {
          let property = cookieKeys[element]; // currently get error, "property" -no unused vars
          this.updateBoxSize({ property: cookieQty });
        }
      }
    }

The updateBoxSize action and mutation in the store:

mutations: {

    [UPDATE_BOX_SIZE](state, { cookieQty }) {
      this.state.cookies[cookie] = cookieQty;
    }
},
actions: {

    updateBoxSize({ commit }, { cookie: cookieQty }) {
      commit(UPDATE_BOX_SIZE, { cookie: cookieQty });
    }
}

and finally the state object

state: {
    daySelected: "",
    cookies: {
      chocolateChip: 0,
      campfire: 0,
      oatmeal: 0
    },
    userInfo: {
      userName: "",
      street: "",
      city: "",
      userPhoneNumber: ""
    },
    paid: false
  },

My overall question is since I can get the name of the key (the correct cookie) that I need to set for the quantity, how do I dispatch the action correctly with the correct structured payload. From there, what do I need to adjust for my action and mutation to work?

Answer 1

You need to update your event handler, action and mutation.

Handler

       selectBoxSize({ boxes, cookieQty, price }) {
     //you already have the key as attribute, no need for loop. However, you might need to validate the key.
      let key = event.currentTarget.getAttribute("data-cookie");
       // note that am passing two properties 
          this.updateBoxSize({ key,  cookieQty });
        }
      

Store

mutations: {

    [UPDATE_BOX_SIZE](state, { key,  cookieQty }) {
      this.state.cookies[key] = cookieQty;
    }
},
actions: {

    updateBoxSize({ commit }, { key, cookieQty }) {
      commit(UPDATE_BOX_SIZE, { key, cookieQty });
    }
}

Answer 2

Modify your function to be

selectBoxSize({ boxes, cookieQty, price }) {
      let element = event.currentTarget.getAttribute("data-cookie");
          this.updateBoxSize({ key: element, val: cookieQty });
    }

and your store to be

mutations: {

    [UPDATE_BOX_SIZE](state, payload) {
      this.state.cookies[payload.key]= payload.val;
    }
},
actions: {

    updateBoxSize({ commit }, payload) {
      commit(UPDATE_BOX_SIZE, payload);
    }
}