devtools: Vuex state not loading
Version
5.0.0-beta.3
Browser and OS info
Chrome 68.0.3440.106, Mac OS X 10.13.5
Steps to reproduce
Open an application, have some mutations happen. Inspect one and you’ll see “Loading State” and it never changes.
Clicking Export of state will give "__vue_devtool_undefined__"
to the clipboard.
It is also not working when in “Recording state” and you click “Load state”
What is expected?
To view the full state at the time of the inspection.
What is actually happening?
Mutation is visible, but the state as a whole is not.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 43
- Comments: 48 (6 by maintainers)
Commits related to this issue
- fix: payload on replaying mutation, closes #773 , closes #792, closes #802 (#829) * test(e2e): test mutation payload * Fix payload on replaying mutation * test(e2e): fix expect Co-authored... — committed to vuejs/devtools by sp1ker 5 years ago
- fix: payload on replaying mutation, closes #773 , closes #792, closes #802 (#829) * test(e2e): test mutation payload * Fix payload on replaying mutation * test(e2e): fix expect Co-authored... — committed to simsim0709/vue-devtools by sp1ker 5 years ago
I just downloaded version 5.0.6 of vue devtools, restarted chrome, and I’m still experiencing this issue, stuck on “Loading state” 😦
I fixed that problem in #829 Now need confirm pull request
I’m having both these problems in both Chrome (69.0.3497.100) and Firefox (v62.02) on OS X (v10.12.6).
I believe I have pinpointed the area where things go wrong (at least in my code/on my system).
STEPS TO REPRODUCE
1) Console log after page reload
Note the
console.log()
output. I’m loading data from Firebase and storing the retrieved data in the Vuex state, and things are stored correctly.2) The same app state shown in Vue DevTools (beta v5.0.0 beta3)
Note the “Recording State” message that never goes away.
3) Vue DevTools display after clicking “Load state” button
Note, that all previous mutations of the state, is now missing.
4) Vue DevTools display after clicking “Commit This Mutation” button
Note that state output is altered (see ‘currentUser’) compared to previous screen (above)
5) Finding the Culprit through the Console
After reviewing the Console output, I found that the last mutation had been called two more times with the entire state as the payload, instead of the real actual payload.
Summary
I haven’t had the time to investigate the DevTools code, and I don’t think I would get where things go wrong within either, but I hope the above will help identify the key areas to review.
The older version of Vue DevTools works fine with the same app.
@siberiadev The issue with your duplicate entries, which I too had, can be solved by a bit of ‘defensive’ coding, and not storing the whole payload object.
Example
I noticed it is still an issue for me when registering state modules using variables for store paths, will try to set a minimal example.
I’m still getting this problem in 5.0.1.
I can’t seem to be able to reproduce getting stuck at Load State, but I was able to reproduce Store states showing as empty after setting values via dispatched actions. Here’s a public repo.
EDIT: Browser: Chrome 73.0.3683.86 OS: macOS Mojave 10.14.3
@Akryum I have rushed together an example that seems to highlight this issue (and possibly another?)
It does seem to be related to dynamic modules.
https://github.com/zefman/vue-devtools-demo
Steps to reproduce
All of the steps above work fine without devtools open.
Hope that helps 👍
Anyone else experiencing this on 5.1.0, try disabling the new Vuex backend in settings, this seems to have resolved it for me. Odd seeing that I’ve been using it fine up until this point.
Devtools: 5.1.1 Chrome: Version 76.0.3809.132 (Official Build) (32-bit)
I got the same problem as OP, with “Clicking Export of state will give “vue_devtool_undefined” to the clipboard.”
I tried a different Vue project and the state loaded fine. I thought it might be a problem with my code, so I tried commenting out all Vuex modules one by one and it started working. I found the culprit was a line like:
if (state.personEmploymentList !== undefined) {
so I replaced it with:
if (state.personEmploymentList.length) {
and now it works. It seems you can kill the Vuex devtools with a bad line of code.
Devtools 5.1.0 Firefox 67.0 Works fine without the new backend…
This is still an issue. Can we re-open this?
This seems to still be an issue in 5.0.0 beta 4 . Any ideas?
I’ve the same issue, the state keeps on loading and hangs, when I click on commit actions the state is empty in devtools and my app crashes with errors because the state get’s altered and fucked up.
Re-open
This issue was opened but fixed: https://github.com/vuejs/vue-devtools/issues/934
Hi. I still have a problem similar to this using the new version pointed by @DevBrent (5.0.3). You can check using the vuex/examples repos, the shopping cart.
Steps to reproduce:
This also happend in my own repo, with a different data structure of course, but getting same error, trying to commit some mutations that update an array.
Any clues?
Fixed and released in 5.0.3 restart chrome! https://github.com/vuejs/vue-devtools/releases/tag/v5.0.3
@Akryum Still an issue in 5.0.0 beta 4
I can also confirm this, the state is stuck.
Version: 5.0.0 beta 3
Same problem here ✋