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

Question

出于非常具体的原因，我已在生产中将 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 开发工具中查看它。

任何指点表示赞赏。

Answer 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
  }
})

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 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，否则可能无法按预期工作。

Answer 6

我也遇到了类似的问题，我的 vue devtools 中不会显示任何 Vuex。对我有帮助的是：

在菜单（右侧 3 个点）中选择 devtools 插件
从显示的列表中选择您的 vue（在我的例子中为“Vue 2”）
取消选中并再次选中“已启用”
关闭开发工具
刷新页面

Answer 7

空缓存刷新帮我完成了。