It's been a while since I worked with VueJS (2 or so years ago). I wanted to get back to working on an old VueJS 2.6 app, and I'm having trouble finding the Time Travel Debugging feature of Devtools for Vuex.
Here you can see what Time Travel Debugging is supposed to look like:
But now at least with Devtools 6.1.4, I'm having trouble finding that feature. I see the Vuex state, but I can't find: the list of mutations, the state changes of the mutations, nor the ability to Time Travel between mutations. See the image below:
Where then is the Time Travel Debugging functionality?
The log of Vuex mutations/actions is now shown on the Timeline tab.
However, the latest version of Vue DevTools (6.x) removes Time Travel debugging (specifically the ability to revert to a specific state). The author explains the reasoning in a GitHub discussion about this very issue:
This is not implemented as the functionality of the devtools changed to a timeline which is not just about the Vuex mutations but also about any other events from components, plugins such as pinia, etc.
Let's use this thread to discuss about Time traveling and how it could look/work in the Timeline.
#tkuntermannpv if you really need Vuex time traveling, please use the legacy version.
As stated, you'd have to install the 5.x version of Vue DevTools to use that feature.
Related
I want to build an app where users can jointly work on lists. The app should be avialable offline and sync changes when it goes online again.
For the app iteself, I've decided to go with Ionic Vue. For storage, I created a Firestore and was able to sync between my app and Firestore by using the Firesotre method onSnapshot() (doc). Although this working at the moment, the resulting code does not look very elegant and I have to create multiple very similar Firebase calls in different components. This slows the app down and (I think) also prevents me from making the lists available offline and sync them again when there is a connection.
I recently discovered vuex and the idea sounds quite fitting for my case: I store all app data in the vuex store and sync it (both ways) to Firestore. My components access the vuex store instead of the Firestore directly. Here are some questions regarding this idea:
Is this in general how the vuex store and Firestore are supposed to be used?
Can I make the vuex store data available on my phone and only sync it to the Firestore whenever there is a connection (to make the app available offline inlc. modifying data)?
If so, what is the easiest way to sync the vuex store to Firestore?
Regarding the syncing: I found Vuexfire, but it does not really work for me as expected - I guess this is because it is built on Vue 2 (as against Ionic which is built on Vue 3). I also found Vuex Easy Firestore, but I'm a bit reluctant to try new tools, as Vuexfire cost me several hours.
Thanks for reviewing my implementation ideas!
Developing a Windows Desktop application that uses Chromium Embedded Framework for the UI frontend, but I assume this would apply equally to Electron and similar platforms as well.
The application will have multiple pages, each implemented as its own component. In a traditional SPA this would typically be implemented using Vue Router, but I assume the main benefits of Vue Router are the ability to route to the appropriate resource based on URI, parse URI query parameters, and enable the forward and back buttons with history.
Since none of these really apply to my Desktop application, I am thinking that Vue Router will bring little to the table and just add more boilerplate noise to the codebase. If I'm missing something and there is a significant benefit in Vue Router for my use case, please let me know.
Side note: I do plan on using Vuex to allow the different page components to work on the same set of state data without a lot of tedious prop/event binding.
I would still opt for vue-router, since it provides a standardized way for in-app routing in Vue apps. It is not some sort of exotic dependency you are introducing.
If your app is growing and you need things like nested routes and dynamic routing, passing props to a route, having navigation guards like ‘beforeEach’, you can just use it, without creating your own solution or rework the app to use the router. Also, another vue developer immediately understands the app routing and so do you, if you have to change something in the app after a year not working on it. And it is all well documented.
And you are developing a desktop app, which makes a few kB more or less in the bundle not a concern, I would think.
Automatic active link CSS classes
HTML history with back/forward navigation support
Nested components
etc.
I'm working on a project that has a large data model and stores much of it in the Vuex store. This is manageable when working with fresh developer environments, but once our app acquires lots of data, such as in a QA environment, the Vue.js devtools crash as soon as I switch to the "Vuex" area of the Vue.js devtools and select a mutation to see the state at that time.
Amending our data model or state management mechanism is not feasible in the short term, so I'm looking for a way to be able to inspect the Vuex store in mature development environments and QA environments.
In general, the portion of the store that grows over time is not usually the area of the store that needs to be inspected, so I'd like to be able to tell the Vue.js devtools to "ignore" or "exclude" that section of the store somehow. My thought is that if the Vue.js devtools aren't watching, parsing, storing, and recalling the troublesome area of the store, the crashes won't happen. Can this be done? How?
If there's no way to "ignore" portions of the store, are there tips, tricks, or settings that would help make the Vue.js devtools not crash when loading large stores?
In Android apps, when you start a new activity, the original activity is still in there, with all its internal data, so when you come back, it is the same as before.
How can I simulate this behaviour in my vue.js hybrid app? Is there some existing solution?
PS. I'm aware of vuex, but I think if I want to all the internal states of the pages in the history stack, then I must implement a stack-like structure by vuex myself. Is there some existing library can do this for me?
Thanks.
Wrapping <router-view> in <keep-alive> would get you expected results.
Or some custom baked solution, similar vuex-router-sync library to keep your page state in sync with the router.
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
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.
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.
you can use
__VUE_DEVTOOLS_GLOBAL_HOOK__.store
You can use Vue devtools in Chrome to see the store:
This just worked for me:
_this.$store
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...)