如何将动作分派到 vuex store.state 中嵌套对象的正确键？

Question

我的组件中有三个按钮，每个按钮都有一个特定的数据属性，因此我可以识别单击了哪个按钮，然后我可以将键映射到存储状态对象中的正确属性。除了数据属性外，每个按钮都是相同的，如下所示：

<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”操作中的关键。如果我的状态对象是扁平的，意味着巧克力片、燕麦片和篝火不在 cookies 对象中，我可以设置正确的值：

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

我的总体问题是，由于我可以获得需要为数量设置的密钥名称（正确的 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

修改你的函数为

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

如何将动作分派到 vuex store.state 中嵌套对象的正确键？

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

javascript

vue.js

vuex

处理程序

商店