Vue中如何正确引用Payload内的对象属性名以更新Vuex State

算力阿峰

2026-4-29

解决Vuex Mutation中更新嵌套State对象的问题

Hey there, let's fix that Vuex mutation issue you're having!

First, let's recap what you're aiming for: you've got a payload containing a line identifier (like "Sinto 6") and a val object packed with key-value pairs that need to update the matching properties in state.Performance[payload.line]. Your original code was trying to use payload.val directly as a property name, which is why it wasn't working—instead, you need to iterate over each individual key in payload.val.

正确的Mutation代码

这里是可以正确更新所有payload.val中属性的写法：

const PERFORMANCE_COMMIT = (state, payload) => {
  // 先获取state中对应的设备对象
  const machineState = state.Performance[payload.line];
  // 遍历payload.val中的每一个属性键
  Object.keys(payload.val).forEach(key => {
    // 使用Vue.set确保响应式更新，即使该属性之前不存在也能触发响应
    Vue.set(machineState, key, payload.val[key]);
  });
}

为什么这个写法有效

Object.keys(payload.val)会提取出val对象里所有的属性名（比如AvgMachTime、PartCount等）
我们遍历每个属性键，用Vue.set更新设备状态对象中对应的属性值。这样能保证Vue的响应式系统捕捉到变化，即使该属性最初没定义（不过在你的场景里所有键都已经在state中存在，但用Vue.set依然是安全的做法）。

替代方案：使用Object.assign（针对已有属性的响应式更新）

如果你确定payload.val中的所有键都已经存在于state.Performance[payload.line]中，也可以用Object.assign来合并更新值：

const PERFORMANCE_COMMIT = (state, payload) => {
  state.Performance[payload.line] = {
    ...state.Performance[payload.line],
    ...payload.val
  };
}

这种方式会创建一个新对象，包含原有属性加上payload.val中的更新值，由于我们替换了对象引用，同样会触发响应式更新。