Vue 3控制台打印state含ID但Vuex存储内ID为null问题排查

根因分析 #

• 核心错误出在 UPDATE_STATE mutation 的写法上：Vuex 传入 mutation 的 state 是当前模块状态对象的引用，你在函数内部直接执行 state = payload 只是修改了函数内部的局部形参指向，没有对 store 中真实的状态对象做任何修改。你在 mutation 中打印的 state 只是局部变量的最新值，并非 store 中的实际状态，因此外部查询 store 时拿到的还是未更新的旧值。

修复方案 #

修改 UPDATE_STATE mutation 逻辑，改为将 payload 属性合并到原 state 对象上，保留响应式引用：

[UPDATE_STATE](state: any, payload: any) {
  console.log("payload:" + JSON.stringify(payload))
  // 替换原直接赋值写法，合并属性到原state对象
  Object.assign(state, payload)
  console.log("state:" + JSON.stringify(state))
},

额外排查点 #

如果修改后仍有问题，可补充检查：

• 确认 state 初始化时是否提前声明了 id 字段，避免响应式丢失（Vue3 基于 Proxy 的响应式系统无需提前声明，Vue2 需显式声明所有根级响应式属性）
• 确认接口返回的 res.data 结构和 state 结构匹配，没有字段层级错位

内容的提问来源于stack exchange，提问作者Bence Birkás