如何在 VueJS DevTools 中使 Vuex “不可见”

Posted 2023-02-22

【中文标题】如何在 VueJS DevTools 中使 Vuex “不可见”

【英文标题】：How can I make Vuex 'invisible' in VueJS DevTools

【发布时间】：2017-12-24 20:12:47

【问题描述】：

vuejs 有一个配置选项可以关闭对组件的检查。这是通过访问

Vue.config.devtools = false

当您在初始化 Vue 之前设置该代码时，用户（或您）将无法检查组件，您将收到以下消息 vue devtools disabled

我正在为 vuex 寻找类似的配置，因为即使关闭了 Vue Js 开发工具，我仍然可以看到包含突变的存储以及撤消它们的能力，这是我不想要的。

有没有办法关闭 vuex 商店检查？

【参考方案1】：

if (process.env.NODE_ENV === 'production') 
  Vue.config.devtools = false
  Vue.config.productionTip = false
  

将上面的代码添加到 app.js 入口文件并使用构建工具设置环境解决了我的问题。

【参考方案2】：

找不到任何类似的标志来禁用Vuex Devtools。但看起来定期运行以下命令（每 200 毫秒左右）将使Vuex 选项卡不可读。

window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('vuex:init', )

例如：

setInterval(() => 
      window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('vuex:init', )
, 200)

【讨论】：

谢谢。不会有性能成本吗？我应该如何运行它？在 Vue init 之前的主 js 文件中还是在 store.js 中？

异步运行应该没问题。使用setInterval。

【参考方案3】：

对于任何未来的访问者，这是 fixed in Vuex，因此设置 Vue.config.devtools = false 也应该禁用 Vuex。