浏览器开发者工具（尤其是 Vue Devtools 扩展）和 Vuex 的的订阅模式冲突

一、问题

打开 F12（开发者工具）才报错，关闭则正常

报错如下：

二、如何解决

这种 “打开 F12（开发者工具）才报错，关闭则正常” 的现象，通常与 浏览器开发者工具（尤其是 Vue Devtools 扩展）和 Vuex 的交互逻辑 有关。核心原因是：打开 F12 时，Vue Devtools 会主动订阅 Vuex 的状态变化，若其添加的订阅者存在异常（或与你的代码冲突），就会触发 “sub is not a function” 错误。
具体原因分析

Vue Devtools（Vue 开发者工具扩展）为了在面板中展示 Vuex 的 action/mutation 执行记录，会通过 store.subscribe 或 store.subscribeAction 注册订阅者，监听 Vuex 的状态变化。当你打开 F12 时，Devtools 会激活并添加这些订阅者；关闭 F12 时，Devtools 的订阅者会被移除（或不激活），因此不会触发错误。

原因：
Vue Devtools 版本与 Vuex 版本不兼容：旧版本的 Devtools 可能不支持你当前使用的 Vuex 版本，导致其添加的订阅者格式错误（比如不是函数或有效对象）。

步骤 1：更新 / 重装 Vue Devtools 扩展（最优先）

90% 以上的此类问题源于 Vue Devtools 扩展版本过旧或与当前 Vuex 版本不兼容，按以下操作解决：

检查当前 Vue Devtools 版本：
打开 Chrome 浏览器 → 右上角菜单 → 更多工具 → 扩展程序 → 找到 “Vue.js devtools”，查看版本（建议至少 v6.0 以上）。

更新到最新版本：
进入Chrome 商店的 Vue Devtools 页面，点击 “更新”（若显示 “已添加”，先移除再重新安装）。

验证是否解决：
重新打开项目页面 → 打开 F12 → 检查是否还报错。若不报错，说明是旧版本扩展的兼容性问题，已解决。

步骤 2：临时禁用 Vue Devtools 排除干扰

若更新后仍报错，临时禁用扩展验证是否为扩展本身的问题：
进入浏览器扩展程序页面 → 关闭 “Vue.js devtools” 的开关（禁用扩展）。
刷新项目页面 → 打开 F12 → 观察是否报错。

若不报错：确认是 Vue Devtools 的问题（可能是扩展 bug），可等待扩展更新修复，或暂时使用其他浏览器（如 Edge）的最新扩展。

若仍报错：排除扩展影响，继续下一步。

步骤 3：检查 Vue 与 Vuex 版本兼容性

若 Vue、Vuex 版本不匹配，可能导致 Devtools 交互异常：
Vue 2 需搭配 Vuex 3.x（不兼容 Vuex 4.x）；
Vue 3 需搭配 Vuex 4.x（不兼容 Vuex 3.x）。
验证版本：查看 package.json 中 vue 和 vuex 的版本，确保匹配（例如 vue: 2.6.x + vuex: 3.6.x）。若不匹配，卸载当前 Vuex 并安装对应版本：

//Vue 2 安装 Vuex 3.x
npm uninstall vuex
npm install vuex@3 --save

//Vue 3 安装 Vuex 4.x
npm uninstall vuex
npm install vuex@4 --save

步骤 4：清除浏览器缓存与无痕模式测试

若浏览器缓存了旧的 Vuex 状态或扩展数据，可能导致异常：
清除缓存：
打开 F12 → 切换到 “Application” 面板 → 左侧 “Storage” 下，右键点击 “Clear site data”（清除所有数据）。
无痕模式测试：
打开浏览器无痕模式（快捷键 Ctrl+Shift+N） → 禁用所有扩展 → 访问项目并打开 F12，观察是否报错（排除其他扩展或缓存干扰）。

按优先级执行：更新 Vue Devtools → 禁用扩展验证 → 检查代码中对 Vuex 内部属性的操作 → 验证版本兼容性。90% 的情况通过更新 / 禁用 Vue Devtools 即可解决，剩余情况多为代码中手动修改了 Vuex 内部订阅者列表，需按规范使用订阅注销函数。