vuex의 store.state에서 중첩된 개체의 올바른 키로 작업을 전송하려면 어떻게 해야 하는가?

vuex의 store.state에서 중첩된 개체의 올바른 키로 작업을 전송하려면 어떻게 해야 하는가?

구성 요소에는 각각 특정 데이터 속성이 있는 세 개의 버튼이 있으므로 어떤 버튼을 클릭했는지 식별할 수 있어 저장소 상태 개체의 올바른 속성에 키를 매핑할 수 있다.다음과 같은 데이터 속성을 제외하고 각 버튼은 동일하다.

<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>

이벤트 핸들러인 selectBoxSize는 내가 키에 매핑한 다음 액션을 디스패치를 시도하는 곳이다.내가 가진 첫 번째 오류는 "property"가 사용하지 않는 var로 오류를 발생시킨다는 것이다.나는 그것이 "updateBoxSize" 액션의 열쇠로 작용할 수 있다고 생각했다.만약 나의 상태 물체가 평평하다면, 즉 초콜릿칩, 오트밀, 그리고 캠프파이어가 쿠키 물체에 있지 않다면, 나는 다음을 사용하여 정확한 값을 설정할 수 있다.

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

하지만 나는 그것이 국가를 변이시키는 올바른 방법이 아니라는 것을 깨달았다.

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 });
        }
      }
    }

스토어에서 updateBoxSize 작업 및 돌연변이:

mutations: {

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

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

그리고 마지막으로 국가 목적

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

나의 전반적인 질문은 수량에 대해 설정해야 하는 키(올바른 쿠키)의 이름을 얻을 수 있기 때문에, 어떻게 하면 정확한 구조화된 페이로드로 정확하게 액션을 발송할 수 있을까 하는 것이다.거기서부터 나의 행동과 돌연변이가 작용하기 위해서는 무엇을 조정해야 하는가?

이벤트 핸들러, 동작 및 돌연변이를 업데이트해야 한다.

핸들러

       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 });
        }
      

저장하다

mutations: {

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

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

함수를 다음으로 수정

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

그리고 너의 가게는

mutations: {

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

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

참조URL: https://stackoverflow.com/questions/65831841/how-do-i-dispatch-an-action-to-the-correct-key-of-a-nested-object-in-store-state