Vue-devtools: Vuex state not loading

[alexbowers]

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.

[Akryum]

Do you have a minimal reproduction please? It's working fine in our e2e tests.

[zefman]

Seeing the same issue on a project too. Can't pinpoint what is causing it, but we use a lot of dynamic Vuex modules so might be something to do with that?

@alexbowers do you have any dynamic modules in your project?

[zefman]

@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 👍

[tochoromero]

I'm seeing the same behavior as well, I do have dynamic modules.

[murbanowicz]

I have the same issue.

[siberiadev]

Ooops!

[mgesmundo]

Same issue with dynamic modules.

[gonzaloserrano]

Same here.

Edit: saw this in the console while clicking on different mutations:

rollbar.min.js:1 Uncaught TypeError: Cannot convert undefined or null to object
    at assign (<anonymous>)
    at addClientFeatures (mutations.js:184)
    at eval (_baseConvert.js:33)
    at arrayReduce (_arrayReduce.js:21)
    at reduce (reduce.js:48)
    at wrapper (_createHybrid.js:87)
    at eval (_baseConvert.js:451)
    at wrapper (_createHybrid.js:87)
    at eval (_createFlow.js:71)
    at Store.features (mutations.js:187)
    at wrappedMutationHandler (vuex.esm.js:705)
    at mutation.handlers.forEach.handler (backend.js:9801)
    at Array.forEach (<anonymous>)
    at replayMutations (backend.js:9801)
    at Bridge.bridge.on.index (backend.js:9760)
    at Bridge.14.EventEmitter.emit (backend.js:1515)
    at Bridge._emit (backend.js:1424)
    at messages.forEach.message (backend.js:1368)
    at Array.forEach (<anonymous>)
    at Bridge.wall.listen.messages (backend.js:1368)
    at listener (backend.js:1322)
    at t._rollbar_wrapped.t._rollbar_wrapped (rollbar.min.js:1)

[ronildo]

I also have the same issue, stays like this forever.

[kematzy]

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
```js
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
  }
}

``

[zefman]

I have had a look into this today, and it seems as though the error occurs because registering a dynamic module doesn't cause the dev-tools to take a new snapshot of the current state.

Registering a module essentially modifies the state outside of a mutation, so the replayMutations function in src/backend/vuex.js basically is out of sync, and working from state without the module.

Unfortunately I can't see an easy way of hooking in to the registerModule function to trigger a new state snapshot.

[dgpgdev]

same error with dynamic register module.

[H3xx3n]

We have a similar issue on our project. With the older version of Devtool is working fine but with the latest beta (currently beta 3 also) the store fails to load with this error:

[dehru]

I'm also seeing this. I'm a newbie to Vue, but my app works fine until I load the vue devtools in chrome and then it seems the states are "wedged". Uninstall the vue-devtools and everything works fine again.

I'm dispatching events in the created() lifecycle hook. Using a setTimeout inside the created() callback of 500 milliseconds, seem to fix the issue, but obviously it's not ideal. Example of hack below:

export default {
  name: 'App',
  created() {
    setTimeout(() => {
      this.$store.dispatch('getCoins')
      this.$store.dispatch('getMarketData')
    }, 500)
  }
}

[husayt]

I have the same problem with Nuxt.
Also, seems this is related to #802

[Binaryify]

same

[davidpelayo]

✋ happening with dynamic modules as well!

[gterras]

Is there any news on this ? This makes developing complex apps in Vuex (with modules) almost impossible as of right now, stable dev-tools can't handle medium-sized stores and beta dev-tool don't even display stores.

[Lenderson]

Same problem here ✋

[ilicmarko]

I can also confirm this, the state is stuck.

Version: 5.0.0 beta 3

[sp1ker]

I fixed that problem in #829
Now need confirm pull request

[EnSabanNur]

Same issue here without dynamic modules.

[harrywynnwill]

I am using an old VueJs devtools chrome extension from here https://crx.dam.io/ext/nhdogjmejiglipccpnnnanhbledajbpd.html

You can drag the zip in here (I had developer mode on)
chrome://extensions/

[ffxsam]

@Akryum Still an issue in 5.0.0 beta 4

[gterras]

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.

[szalapski]

This seems to still be an issue in 5.0.0 beta 4 . Any ideas?

[sp1ker]

@szalapski
Can you create public repository with problem for reproduction please?

[kasuganodayy]

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

[DevBrent]

Fixed and released in 5.0.3 restart chrome!
https://github.com/vuejs/vue-devtools/releases/tag/v5.0.3

[sebastianlp]

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"
   
3. Add any product to the cart using the "Add to cart" button, you will see some more mutations, commit them:
   
4. You will get the console error and the vuex tab will be stucked:
   Error:
   
   Vuex:
   

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?

[SnooHD]

@sebastianlp I'm having the same issue.
For me, it seems the case of using getters with a payload..

export const target = (state, getters, rootState, rootGetters) => ({from, target}) => {
}

{from, target} gets changed by babel to _ref.
Then it tries to set var from = _ref.target and var target = _ref.target..
But because the payload is empty, _ref doesn't exist.
I get the same error and Vue devtools gets stuck loading the state.

Edit:
I am also using 5.0.3!

Edit2:
Scratch this, I was simply triggering the getter with the wrong parameters in my code somewhere... 🤦‍♂️

[sean-hill]

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

[aotearoacoder]

Any know of a tracking issue that is open?

[sebastianlp]

This issue was opened but fixed: https://github.com/vuejs/vue-devtools/issues/934

[xaksis]

This is still an issue. Can we re-open this?

[Akryum]

@xaksis Please open a new issue with more details on your problem.

[ronildo]

I used to have the same problem, but I don't have it anymore.
Also it's worth mentioning that I had Vue Performance Devtool installed, which also was causing some sort of error, after I disabled it, I didn't get the problem anymore.

[mnooblet]

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

[Akryum]

See my previous comment. Vuex state not loading is not detailed enough.

[gkkirilov]

Restarting the browser worked for me

[mtimoustafa]

I'm also experiencing the same bug on 5.0.9 😞 I just opened a new issue for this ^, hoping to get some visibility.

[Zetaphor]

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.

[szalapski]

5.1.0 seems to have resolved this for me for now, whether or not the "new backend" is enabled. I'll come back here if the problem comes up again.

[daniel-stelle]

5.1.0 works for me on Chrome, but I still have this issue on Firefox 67.0 with Dev tools 5.1.0.

[Yakoot]

Vue.js devtools 5.1.0
Vivaldi 2.5.1525.43 (Stable channel) (64-bit) (chrome 74)

dynamic modules

Vuex state not loading and I also dont see the "Loading state" text

[blackfyre]

Devtools 5.1.0
Firefox 67.0
Works fine without the new backend...

[ekosynth]

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.

[briedis]

I experienced a very similar issue.
What I found out that I was mutating the object that was being passed to a mutator:

``` mutations: {
Store.SET_INITIAL_STATE {
if (data.myObject) {
state.myObject = MyClass.fromArray(data.myObject);
}
}
}

And in the `fromArray` I was doing:

fromArray(obj){
delete.obj.items; // This mutates the passed object
return Object.assign(new MyObject, obj);
}
```
I solved it by avoiding mutations of the parameter object. (I cloned the object before mutating).

Apparently, vuex keeps the reference of object, and if you try to replay it, it will use the same object.

Don't mutate mutation parameters - you will have a bad time.