Nuxt.js Vuex问题：mutation中的console.log为何显示未来状态？

架构老林

2026-5-7

这是Vue DevTools特性导致的正常现象，并非配置问题！

你遇到的这个情况其实是Vue DevTools的「状态回溯展示」特性造成的视觉错觉，不是代码执行顺序出问题，也不需要额外配置~

具体原因拆解：

Vuex的mutation是同步执行的，你的代码逻辑顺序完全没问题：先执行console.log(state)，再执行state.hello = value。
但Vue DevTools为了让开发者更清晰看到mutation执行后的最终状态，会在mutation执行完成后，更新控制台中state对象的显示内容。也就是说，你在控制台看到的state对象已经是mutation执行完毕后的最终状态，而非console.log那一刻的状态。

验证方法：

如果想确认代码执行顺序的正确性，可以修改mutation里的代码，把当前状态值存到临时变量再打印：

export const mutations = {
  test(state, { value }) {
    const currentHello = state.hello;
    console.log(currentHello); // 这里会打印出'before'，符合预期
    state.hello = value;
  }
};

这时候你会看到控制台打印的currentHello是'before'，而DevTools里展示的state最终是'after'，这就说明代码执行顺序完全正常，只是DevTools的展示特性让你产生了“赋值前状态就变了”的错觉。