Vuex Store 是否可以从控制台或客户端浏览器访问？

Question

我正在构建这个 Vue 2 应用程序，我一直读到应该使用 Vuex 状态管理，一开始我不太理解它的概念，但现在在使用 Vue 之后，我可以看到它是一个更大的应用程序。

但我的问题是来自 Dev 控制台的人或以任何形式访问存储在 store.js 中的数据，我的意思是那些我不呈现给浏览器的数据？

我可以将敏感数据保存在存储中吗，我的意思是，用户单击此链接，向该用户发送消息，在此页面上花费了很多时间等…同时将所有这些数据上传到我的数据库..

Vuex Store 适合这种工作/工作吗？

干杯

原文由 Marketingexpert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的他们可以。

我使用的调用是

document.getElementsByTagName('a')[0].__vue__.$store.state

这假设第一个链接具有 vue 属性，几乎总是如此。如果没有，请尝试其他标签。用户界面令人不快，但足以自我记录。这是一个有用的调试工具，也是用户可以做的事情。

当然，有决心且技术娴熟的用户可以编写浏览器插件来为其提供良好的 UI。或者也许这就是 Chrome 的 Vue.js devtools 扩展 所做的？我没有实际使用过。

原文由 dspeyer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2022答案

观点 2：

 Array.from(document.querySelectorAll('*')).find(e => e.__vue__).__vue__.$store.state

视图 3：

 Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store.state

此代码适用于所有生产站点，包括远程移动调试，并且不需要开发模式。

dspeyer 的回答是我回答的基础，但基于 <a> 标记不适用于所有应用程序。所有其他答案都假定 Vue 处于开发模式，不适用于移动网络浏览器上的生产站点。感谢 Joe Maffei 的 Vue 3 更新。

原文由 dotancohen 发布，翻译遵循 CC BY-SA 4.0 许可协议