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

一、问题
二、如何解决
- - [步骤 1：更新 / 重装 Vue Devtools 扩展（最优先）](#步骤 1：更新 / 重装 Vue Devtools 扩展（最优先）)
  - [步骤 2：临时禁用 Vue Devtools 排除干扰](#步骤 2：临时禁用 Vue Devtools 排除干扰)
  - [步骤 3：检查 Vue 与 Vuex 版本兼容性](#步骤 3：检查 Vue 与 Vuex 版本兼容性)
  - [步骤 4：清除浏览器缓存与无痕模式测试](#步骤 4：清除浏览器缓存与无痕模式测试)

一、问题

打开 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 并安装对应版本：

javascript 复制代码

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

javascript 复制代码

//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 内部订阅者列表，需按规范使用订阅注销函数。