如何向 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);
    }
}