google-chrome - 在 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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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