Is Vuex Store accessible from console or from client's browser?

Question

I'm building this Vue 2 app, and I keep reading that one should use Vuex State management, in the beginning I didn't quite understand it's concept, but now after playing around with Vue, I can see it's a most for a larger app.

But my question is can someone from Dev console or in any form access data which are stored in store.js, I mean those data which I do not render to browser?

Can I keep sensitive data on store, by sensitive, I mean, user clicked this link, sent message to this user, spent so much time on this page etc... and in mean time upload all this data to my db..

Is Vuex Store for this kind of work/job ?

Cheers

Solution 1

Yes they can.

The invocation I use is

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

This assumes the first link has vue properties, which is almost always the case. If not, try other tags. The UI is unpleasant, but adequately self-documenting. It's a useful debugging tool and something a user could do.

Of course, a determined and skilled user could write a browser plugin to put a good UI on this. Or maybe that's what the Vue.js devtools extension for Chrome does? I haven't actually used that.

Solution 2

2022 Answer

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

This code works on all production sites, including remote mobile debugging, and does not require dev mode.

dspeyer's answer was the basis for my answer, but based on an <a> tag does not work on all applications. All other answers assumed that Vue was in dev mode, not applicable for a production site on mobile web browser. Thank you Joe Maffei for the Vue 3 update.

Solution 3

you can use

__VUE_DEVTOOLS_GLOBAL_HOOK__.store

Solution 4

You can use Vue devtools in Chrome to see the store:

View more solutions

Comments

[Marketingexpert]

Thank you so much for your answer :) I appreciate it!

[Bill Criswell]

I wouldn't say "Short Answer: No" here. It might lead people into a false sense of security. I'd make that a simple "yes". An example of getting it would be rootElementOfApp.__vue__.$store.

[Otto G]

Thank you @BillCriswell for the tip about accessing the store – very useful for debugging purposes.

[eduvv]

IIRC Vue Devtools only works if the app is running in development(not production) mode with sourcemapping enabled.

[Maurice]

in order for Vue Devtools to work you must explicitly set the devtools flag to true - vuejs.org/v2/api/#devtools

[Tofandel]

Only in development mode

[Muhamed Ahmatović]

If the first 'a' tag is not a vue instance, you can use Array.from(document.getElementsByTagName('a')).find(e => e.__vue__).__vue__ which will return the vue instance (if one is present)

[Thierry J.]

As almost all vue apps are initialized on a <div id='app'></div> element, you can just use document.getElementById('app').__vue__....

[Tomasz Gandor]

Maybe it's because I have Vue 3, but the extension says "Vue.js not detected". The app is running in development mode.

[Gander]

Please edit your answer to include an explanation of how this works and why it is the solution to the problem described in the question. See How to Answer.

[Alex]

This is related to Vue Devtools: github.com/vuejs/vue-devtools. But actually, it works in the Chrome console.

[Joe Maffei]

In Vue 3, I was able to access it through document.getElementById('app').__vue_app__.config.globalProp‌​erties.$store.state

[Joe Maffei]

Updated for Vue 3: Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store.st‌​ate

[Joe Maffei]

This approach didn't work for me, but this did: __VUE_DEVTOOLS_GLOBAL_HOOK__.apps[0].app.config.globalProper‌​ties.$store.state