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

@TomaszGandor `document.getElementById('app').__vue_app__.config.globalProperties.$store.state` — Joe Maffei, Apr 13 '22 at 21:24

score 73 · Accepted Answer · answered Oct 05 '18 at 17:07

73

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.

answered Oct 05 '18 at 17:07

dspeyer

2,904
1
18
24

6

IIRC `Vue Devtools` only works if the app is running in development([not production](https://vuejs.org/v2/guide/deployment.html)) mode with sourcemapping enabled. – Edito Jan 04 '19 at 11:31
in order for Vue Devtools to work you must explicitly set the `devtools` flag to true - https://vuejs.org/v2/api/#devtools – Maurice Mar 12 '19 at 01:20
5

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) – Muhamed Ahmatović Jan 27 '20 at 12:23
9

As almost all vue apps are initialized on a `
` element, you can just use `document.getElementById('app').__vue__....` – Thierry J. Aug 14 '20 at 05:54
2

In Vue 3, I was able to access it through `document.getElementById('app').__vue_app__.config.globalProperties.$store.state` – Joe Maffei Apr 13 '22 at 21:28

dotancohen · Answer 2 · 2022-04-14T06:15:04.273

37

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.

edited Apr 14 '22 at 06:15

answered Oct 06 '21 at 13:41

dotancohen

30,064
36
138
197

1

Updated for Vue 3: `Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store.state` – Joe Maffei Apr 13 '22 at 21:30
1

This should be the accepted answer, as it works on a broader set of Vue applications. – coccoinomane Jan 20 '23 at 16:08

score 7 · Answer 3 · answered Dec 15 '20 at 08:00

7

you can use

__VUE_DEVTOOLS_GLOBAL_HOOK__.store

answered Dec 15 '20 at 08:00

Yaroofie

89
1
5

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 [answer]. – Gander Dec 15 '20 at 10:24
This is related to Vue Devtools: https://github.com/vuejs/vue-devtools. But actually, it works in the Chrome console. – Alex Mar 15 '21 at 03:10
This approach didn't work for me, but this did: `__VUE_DEVTOOLS_GLOBAL_HOOK__.apps[0].app.config.globalProperties.$store.state` – Joe Maffei Apr 13 '22 at 21:33

Nic Scozzaro · Answer 4 · 2021-12-23T14:58:44.800

6

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

edited Dec 23 '21 at 14:58

answered Aug 15 '19 at 17:06

Nic Scozzaro

6,651
3
42
46

1

Only in development mode – Tofandel Jan 08 '20 at 20:41
1

Maybe it's because I have Vue 3, but the extension says "Vue.js not detected". The app is running in development mode. – Tomasz Gandor Dec 04 '20 at 10:48

Navid Shad · Answer 5 · 2023-05-08T08:57:58.063

It can be retrieved in more understandable way (write human readable code):

Explained version

// 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

Short version

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

tommybullfrog · Answer 6 · 2023-06-29T13:27:06.753

0

To add to answers above, if using:

Vue3 + Pinia

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

edited Jun 29 '23 at 13:27

answered Jun 29 '23 at 13:06

tommybullfrog

21
5

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Jul 09 '23 at 01:40

score -1 · Answer 7 · answered Mar 03 '21 at 05:35

-1

This just worked for me:

_this.$store

answered Mar 03 '21 at 05:35

user3738936

936
8
22

score -3 · Answer 8 · answered Apr 18 '17 at 02:01

can someone from Dev console or in any form access data which are stored in store.js

short answer: no
longer answer: depends on sneaky they are. but I would not be too worried about this... because since (I assume) you plan to send the collected data to some type of API, even if they can't access the Vuex store... they could still see the AJAX request going out.

Can I keep sensitive data on store

It's generally not a good idea keep any type of private or sensitive data on the client. But in your particular case I think it's fine because what you define as "sensitive" is just some metadata about the users actions (aka: their history).

Is Vuex Store for this kind of work/job ?

You can store just about anything in Vuex. There is no real limitation on the type of data... only on how much (I would not recommend turning a 500mb images to a string and putting it in the store...)

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`. — Bill Criswell, Mar 20 '18 at 10:29
Thank you @BillCriswell for the tip about accessing the store – very useful for debugging purposes. — Otto G, Sep 26 '18 at 08:50

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

8 Answers8

2022 Answer

Vue 2:

Vue 3:

Vue3 + Pinia

Linked