在 Vue 开发工具 (vue2/vuex3) 中未检测到 Vuex 存储

Posted 2023-02-22

【中文标题】在 Vue 开发工具 (vue2/vuex3) 中未检测到 Vuex 存储

【英文标题】：No Vuex store detected in Vue Dev Tools (vue2/vuex3)

【发布时间】：2018-12-01 03:06:23

【问题描述】：

出于非常具体的原因，我在生产中将 vue 开发工具设置为 true。

Vue.config.devtools = true

我正在使用以下版本：

"vue": "^2.5.2"
"vuex": "^3.0.1"
"vuetify": "^1.0.0"

虽然我可以看到组件和事件，但未检测到 Vuex 存储。

我曾尝试将 vuex 版本降级到 2.3.1 和 2.4.x，但没有帮助。 这是我提到的链接 - https://github.com/vuejs/vue-devtools/issues/405

注意 - 商店运作良好，只是我无法在 Vue 开发工具中查看它。

任何指针表示赞赏。

【问题讨论】：

您也应该将NODE_ENV 设置为development。如果你不知道如何使用这个答案：***.com/questions/25112510/…

【参考方案1】：

您必须在创建商店之前设置Vue.config.devtools = true。

这里是我的 store.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
Vue.config.devtools = true

export const store = new Vuex.Store(
  state: 
    counter: 0
  
)

【讨论】：

如果你导入你的商店，你也需要它github.com/vuejs/devtools/issues/405#issuecomment-379314711

【参考方案2】：

还要确保在 devtools 中打开录制模式（红色圆形按钮）。

它被关闭了，这实际上是一个错误。 :-D

【参考方案3】：

我在使用 Vue 3 时遇到了完全相同的问题。 将 vuex 从 4.0.0 更新到 4.0.2 确实解决了这个问题。

【讨论】：

谢谢！从 4.0.0 更新到 4.0.2 确实解决了 devtools 中缺少 vuex 的问题

【参考方案4】：

如果 Vuex 存储值显示未定义，可能是因为这些值没有通过突变设置

【讨论】：

Mithsew，这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker.

【参考方案5】：

对我来说解决这个问题的方法是将 devtools 导入放在我的 main.js 文件中的 Vue 之前：

import devtools from '@vue/devtools';
import Vue from 'vue';
// ...

文档提到这一点：https://devtools.vuejs.org/guide/installation.html#using-dependency-package

确保在 Vue 之前导入 devtools，否则可能无法按预期工作。