Vuex中如何向嵌套state的对应键分发action实现合规状态更新

• 组件事件函数参数不匹配：模板中@click="selectBoxSize(value, $event)"传入了2个参数，但方法定义只接收了第一个参数的解构值，没有接收事件对象event，导致后续通过DOM属性取cookie类型的逻辑完全失效。
• 冗余逻辑导致变量未使用：data-cookie的属性值本身和state.cookies下的键名完全一致，不需要额外定义cookieKeys对象做循环匹配；且构造payload时漏写动态键语法，把property变量写成了固定字符串键名，导致声明的property变量完全没被引用，触发未使用变量的报错。
• Store内的参数解构逻辑完全反向：action和mutation中把payload解构的重命名语法当成了传值逻辑，既没有接收到要更新的目标键名，也没有正确拿到要写入的数量值，甚至引用了未定义的变量cookie。
• 模板静态绑定错误：v-for循环渲染的三个按钮，label的for属性、button的id属性全部硬编码为oatmeal，会导致三个按钮的DOM锚点完全冲突，点击标签无法正确聚焦对应按钮。

1. 修正组件内的事件处理逻辑 #

补全函数参数，简化取值逻辑，结构化构造action的payload：

// 函数需要接收两个参数：第一个是v-for循环出的套餐对象，第二个是原生事件对象
selectBoxSize(boxSize, event) {
  // 直接通过dataset取到data-cookie对应的cookie类型，和state的键完全匹配
  const targetCookieKey = event.currentTarget.dataset.cookie
  // 构造结构化payload：同时携带要更新的state键名、要写入的数量值
  this.updateBoxSize({
    cookieType: targetCookieKey,
    qty: boxSize.cookieQty
  })
}

原代码中cookieKeys循环匹配的逻辑完全可以删除，因为data-cookie的属性值和state.cookies的键名是一一对应的，不存在额外的映射转换需求。

同时把模板里硬编码的DOM绑定改成动态值，避免锚点冲突：

<ul class="list-items">
  <li v-for="(value, index) in boxSizesArray" :key="index">
    <!-- 动态绑定label的for属性，和button的id保持一致 -->
    <label :for="`cookie-${value.cookieType}`">{{ value.cookieType }}</label>
    <button
      :id="`cookie-${value.cookieType}`"
      type="button"
      class="date-buttons"
      :value="index"
      :data-cookie="value.cookieType"
      @click="selectBoxSize(value, $event)"
    >
      <div>
        <p>{{ value.boxes }} boxes,</p>
        <span>{{ value.cookieQty }} cookies</span>
      </div>
    </button>
  </li>
</ul>

2. 修正Store内的action逻辑 #

去掉错误的解构重命名，把收到的完整payload原封不动传给mutation，不做多余的属性改名：

actions: {
  updateBoxSize({ commit }, payload) {
    // payload结构为 { cookieType: 'oatmeal', qty: 12 }
    commit(UPDATE_BOX_SIZE, payload)
  }
}

3. 修正Store内的mutation逻辑 #

从payload中解构出目标键名和数量值，通过动态键的方式修改对应state属性；不要在mutation里写this.state，直接使用传入的state形参即可：

mutations: {
  [UPDATE_BOX_SIZE](state, payload) {
    const { cookieType, qty } = payload
    // 用动态键访问嵌套的cookies对象属性，实现精准赋值
    state.cookies[cookieType] = qty
  }
}

• 整套流程中payload始终保持统一结构：同时携带要修改的目标键名和要写入的具体值，从组件层传到action再传到mutation，全程不需要做属性转换，从根源上避免解构错位、变量未定义的问题。
• 严格遵循Vuex的修改规范：所有state的修改操作都在mutation中执行，组件层不会直接操作state对象，符合单向数据流的要求。
• 删掉了冗余的键值匹配逻辑，降低代码维护成本。

内容的提问来源于stack exchange，提问作者Kevin T.