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

Question

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

但我的问题是，来自开发控制台的人或以任何形式可以访问存储在 store.js 中的数据，我的意思是那些我不渲染到浏览器的数据？

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

Vuex Store 适合这种工作吗？

干杯

Answer 1

是的，他们可以。

Vue 2：

我使用的调用是

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

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

当然，坚定且熟练的用户可以编写一个浏览器插件来为此提供良好的 UI。 或者也许这就是 Chrome 的 Vue.js 开发工具扩展 的作用？ 我还没有实际使用过。

Answer 2

2022 年答案

Vue 2：

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

Vue 3：

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

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

dspeyer

的答案是我答案的基础，但基于

<a>

标签并不适用于所有应用程序。所有其他答案都假设 Vue 处于开发模式，不适用于移动网络浏览器上的生产站点。感谢 Joe Maffei 的 Vue 3 更新。

Answer 3

你可以使用

__VUE_DEVTOOLS_GLOBAL_HOOK__.store

Answer 4

您可以在 Chrome 中使用 Vue devtools 查看商店：

Answer 5

它可以以更容易理解的方式检索（编写人类可读的代码）：

解释版

// Define the appId, This is the app id in most cases unless you changed it intentionally
const rootSelector = '#app'

// Find the app element
const appElement = document.querySelector(rootSelector)

// Define Vue property name, Vue object lives in a property inside the app element, 
// The property name is different based on Vue version.
const signProperty = 'Vue3' ? '__vue_app__' : '__vue__';

// Now, address the vue object and retrieve the vuex state from global the properties
const state = appElement[signProperty].config.globalProperties.$store.state

精简版

function getState() {
  const appElement = document.querySelector('#app')
  return appElement['__vue_app__'].config.globalProperties.$store.state
}

Answer 6

要添加到上面的答案，如果使用：

Vue3 + 皮尼亚

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

Answer 7

如果是 Nuxt2+Vue2 应用程序，则可以通过以下方式访问该问题

document.getElementById('__nuxt').__vue__.$store.state

Answer 8

这对我有用：

_this.$store

Answer 9

开发者控制台或任何形式的人都可以访问存储在 store.js 中的数据

简短回答：不
更长的答案：取决于他们是否偷偷摸摸。但我不会太担心这个...因为（我假设）你计划将收集到的数据发送到某种类型的 API，即使他们无法访问 Vuex 存储...他们仍然可以看到 AJAX要求外出。

 

我可以保存敏感数据吗

在客户端上保留任何类型的私人或敏感数据通常不是一个好主意。但在您的特定情况下，我认为这很好，因为您定义的“敏感”只是有关用户操作的一些元数据（又名：他们的历史记录）。

 

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

你可以在 Vuex 中存储任何东西。对数据类型没有真正的限制...只有多少（我不建议将 500mb 图像转换为字符串并将其放入商店...）