Vuex中await后commit无法更新表单状态问题求助

看起来你遇到的问题是Vuex状态明明已经更新，但表单却没有同步渲染，只有手动操作后才会更新。我帮你排查了一下代码，核心问题出在对象引用没有变化，导致Vue的响应式系统没检测到状态更新。

问题根源 #

你在action里写了这行代码：

var new_show = Object.assign(rootState.shows.show, show);

这里Object.assign的第一个参数是rootState.shows.show——也就是Vuex状态里的原对象，这会直接修改原对象的属性，然后new_show其实就是原对象的同一个引用。当你commit这个对象到mutation时，state.show的引用根本没有变化，Vue的响应式系统会认为状态没有更新，自然不会触发组件和表单的重新渲染。

另外，直接修改rootState里的对象也违反了Vuex的状态修改规则（只能通过mutation修改状态），这也可能导致响应式追踪异常。

解决方案 #

你需要创建一个全新的对象来合并原有状态和新数据，确保引用发生变化，让Vue能检测到更新。有两种常用方式：

1. 使用Object.assign创建新对象

把原代码改成：

// 用空对象作为第一个参数，生成全新的合并对象
var new_show = Object.assign({}, rootState.shows.show, show);

2. 使用ES6扩展运算符（更简洁）

这是现在更推荐的写法：

const new_show = { ...rootState.shows.show, ...show };

这两种方式都会生成一个和原对象完全独立的新对象，当你commit这个新对象到mutation后，state.show的引用发生变化，Vue会立刻检测到状态更新，表单也就会同步渲染新的数据了。

额外建议 #

• 尽量避免直接修改rootState里的对象，始终通过mutation来更新状态，这能保证状态变化的可追踪性，也符合Vuex的设计规范。
• 如果你的show初始状态里没有runtime、description这些属性，也可以提前在state里初始化这些属性（比如设为空字符串），这样即使后续修改属性值，Vue的响应式系统也能正确追踪，但上面的解决方案已经能解决你的问题，这一步属于优化项。

内容的提问来源于stack exchange，提问作者koichirose