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

Mercurous

What about Vue 3? – Satrap

@TomaszGandor document.getElementById('app').__vue_app__.config.globalProperties.$store.state – Boorer

Answer 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.

Welldressed

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

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

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) – Tetrarch

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

In Vue 3, I was able to access it through document.getElementById('app').__vue_app__.config.globalProperties.$store.state – Boorer

It can be used also $0 when you click at <div id="__nuxt"> in Elements. Then $0.__vue__.$store.state should have worked – Essen

Answer 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.

Viscountcy

Updated for Vue 3: Array.from(document.querySelectorAll('*')).find(e => e.__vue_app__).__vue_app__.config.globalProperties.$store.state – Boorer

This should be the accepted answer, as it works on a broader set of Vue applications. – Valorie

Answer 3

you can use

__VUE_DEVTOOLS_GLOBAL_HOOK__.store

Twit

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. – Milwaukee

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

This approach didn't work for me, but this did: __VUE_DEVTOOLS_GLOBAL_HOOK__.apps[0].app.config.globalProperties.$store.state – Boorer

Answer 4

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

Deuteronomy

Only in development mode – Persia

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

Answer 5

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
}

Euton

Answer 6

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

Prinz

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? – Tully

Answer 7

If it is a Nuxt2+Vue2 application the sore might be accessible via document.getElementById('__nuxt').__vue__.$store.state

Sepulveda

Answer 8

This just worked for me:

_this.$store

Monas

Answer 9

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...)

Numerator

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

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. – Swashbuckler

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