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.

image

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 43
  • Comments: 48 (6 by maintainers)

Commits related to this issue

Most upvoted comments

I just downloaded version 5.0.6 of vue devtools, restarted chrome, and I’m still experiencing this issue, stuck on “Loading state” 😦

image

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.

01-console-output-vue-devtools-beta

2) The same app state shown in Vue DevTools (beta v5.0.0 beta3)

Note the “Recording State” message that never goes away.

02-devtools-output-vue-devtools-beta

3) Vue DevTools display after clicking “Load state” button

Note, that all previous mutations of the state, is now missing.

03-devtools-loaded-output-vue-devtools-beta

4) Vue DevTools display after clicking “Commit This Mutation” button

Note that state output is altered (see ‘currentUser’) compared to previous screen (above)

04-devtools-committed-output-vue-devtools-beta

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.

05-console-after-committed-output-vue-devtools-beta

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

    userExtraStore: (state, payload) => {
       // DON'T STORE payload object
      // state.authUser = payload
      
      // INSTEAD, rewrite the object to ensure the parts you want only included.
      state.authUser = {
        email: payload.email,
        name: payload.name,
        role: payload.role,
        verified: payload.verified
      }
    }
``

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

  • npm run serve
  • Open the devtools beta, and navigate to the vuex tab
  • See that the current state is represented fine
  • Click the button labeled ‘Normal module mutation’
  • See the mutation captured in devtools, and click load state
  • The state reloads (although for some reason notDynamic.foo is undefined even though its reflected correctly in the template, another bug?)
  • Click the button labeled ‘Add dynamic vuex module’ and a dynamic module will be registered
  • Click ‘Perform a mutation on the dynamic module’, devtools will change to ‘Recording state’
  • Click load state and it will not load, and you will have a console error

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? image

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

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:

  1. After installing the dependencies and running the example, go to http://localhost:8080/shopping-cart/
  2. Open console, go to Vue->Vuex, see the mutations and press “Commit all” image
  3. Add any product to the cart using the “Add to cart” button, you will see some more mutations, commit them: image
  4. You will get the console error and the vuex tab will be stucked: Error: image Vuex: image

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

Image

Same problem here ✋