Javascript 对象扩展运算符：设置要通过有效负载更新的属性

代码段：

updateSelectedAreaColor: (state, payload) => {
state.selectedArea = { ...state.selectedArea, color: payload };
},

我正在更新对象状态的属性color。使用有效负载选择区域。我不想硬编码要更新的属性，而是想通过我的负载设置属性
例如：

updateSelectedAreaColor: (state, payload) => {
state.selectedArea = { ...state.selectedArea, payload.target: payload.value };
},

---

但是，此代码会抛出一个错误。有人知道如何设置要通过有效负载更新的值吗？

动态属性放在括号内：

 updateSelectedAreaColor: (state, payload) => {
    state.selectedArea = { ...state.selectedArea, [payload.target]: payload.value };
 },

不过，我希望：

 updateSelectedAreaColor: (state, payload) => {
   state.selectedArea = { ...state.selectedArea,  ...payload};
 },

这样，您可以轻松地同时更改多个道具：

 updateSelectedAreaColor(this.state, { color: "green", backgroundColor: "red" });

---

为什么变异

状态

？@arup为什么不？！因为你不应该。对不起，我应该说清楚我指的是vuex。我已经添加了标签。谢谢你的回答@乔纳斯·威尔姆斯：我同意你的看法。但是给我变异这个对象感觉很不对。无论如何，感谢您抽出时间写下答案和评论，以澄清您的想法和我的误解。：）