mutations: { inc(state) { state.count += 1; } }
store.commit('inc');

开启 strict 后每次点加号控制台抛 Error: [vuex] do not mutate vuex store state outside mutation handlers,页面数字还在变但 DevTools 的时间线断了,回滚也复现不了,刷新之后又恢复正常。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,组件里直接给 store.state 赋值,绕过了 mutation,严格模式每次变更都会做深度检查并抛错,回滚和调试也跟着失效,问题还不好复现,排查时容易误判成组件问题。

「Vuex 严格模式报错」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。

处理上按这个顺序:把赋值收进 mutation,统一通过 commit 提交,不要在组件里直接改;异步逻辑放到 action 里,处理完再提交 mutation,顺序不能反;开发环境保留 strict,生产环境关掉减少性能开销。

改完只确认一件事:点击后 DevTools 能看到 mutation 记录,控制台不再抛严格模式的错误,时间线也能正常回放。

作者 9823189