如何向 vuex 中 store.state 中嵌套 object 的正確鍵分派操作？

Question

我的組件中有三個按鈕，每個按鈕都有一個特定的數據屬性，因此我可以識別單擊了哪個按鈕，然后我可以 map 存儲 state object 中正確屬性的密鑰。 除了 data 屬性之外，每個按鈕都是相同的，如下所示：

<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 是我映射到鍵然后嘗試分派操作的位置。 我遇到的第一個錯誤是“屬性”作為未使用的變量拋出錯誤。 我認為它可以作為“updateBoxSize”操作的關鍵。 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;

但我意識到這不是變異 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 });
        }
      }
    }

store 中的 updateBoxSize 動作和突變：

mutations: {

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

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

最后是 state object

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

我的總體問題是，由於我可以獲得需要為數量設置的鍵名（正確的 cookie），如何使用正確的結構化有效負載正確調度操作。 從那里開始，我需要調整什么才能使我的動作和突變起作用？

Answer 1

您需要更新您的事件處理程序、操作和突變。

處理程序

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

Answer 2

將您的 function 修改為

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