Unable to properly inspect Vuex state in real-time apps due to full state refresh on mutations

[gloomylumi]

Version

5.0.6

Browser and OS info

Chrome 73 / macOS Mojave 10.14.2

Steps to reproduce

Attempt to inspect Vuex state in an app with a large Vuex store (30 namespaced modules, in my case) with frequent mutations (multiple 'concurrent' mutations approx. every 3 seconds).

What is expected?

Previous versions would only re-render the mutated state, making it easy to observe a piece of nested state over time.

What is actually happening?

It is basically impossible to view any nested state (ie arrays/objects) before ALL of the state is reloaded and re-rendered, complete with loading icon.

---

My app is a real-time UI for a hardware infrastructure system. I deal in nested data structures representative of device and system state in real-time (data is pushed via web-socket). The ability to observe nested state in real-time is critical to my debugging and feature validation workflows.

[Akryum]

Would #941 solve this?

[gloomylumi]

Unfortunately, no. I can't even locate properties fast enough to be able to "pin" prior to a refresh. Would it help if I made a video of the behavior I'm seeing with my app?

[Akryum]

Yes, it would help me understand what this issue is really about. 😸️

[awulkan]

I have the same issue. We have a pretty large store and a very interactive application, so mutations happen pretty often. Every time a mutation happens the whole store is reloaded in the dev tools. Partly because of this (and some other bugs like #935) I have had to revert to v4.1.5 of the extension.

[Lanchi]

This happens after each mutation (our store doesn't even have so many modules)
Mutation that's performed in video just toggles a boolean prop inside ui object in state, using lodash assign method.

[Akryum]

@Lanchi I don't see the problem in your gif.

[awulkan]

@Akryum I think he/she simply meant that all state data reloads after every mutation.

[Lanchi]

My initial complaint was that after each mutation Vuex tab ends with this

That's my bad, Autoload Vuex state wasn't enabled in settings.

With autoload enabled, on each mutation we get a Loading state message and complete reload of Vuex state. In case of multiple consecutive mutations (in my case 27) from time to time we get stuck on this and state is never loaded. I don't recall having this issue on v4.x 🤷‍♀️

[awulkan]

That's because 4.x didn't reload the whole state. I don't know what the reasoning was for disabling that. Performance?

Is there any way to get the old functionality back? Or else this extension becomes pretty hard to use for me due to lots of mutations.

[Akryum]

Before v5.0, the whole vuex state was serialized for each mutation, rendering it unusable for mid to large size apps (freezes, excessive memory allocation and crashes - even if you where not looking at the vuex tab in the devtools).

Since v5.0, this is no longer the case, since we only record mutations and their payload. The vuex state is replayed and serialized only on-demand, which means it has way less impact on the app and browser general performance, and crashes should mostly be a thing of the past.

[Akryum]

@Lanchi If state is never loaded, you likely ran into an issue. Please look at the browser console and open a GitHub issue with all the details and a link to a runnable reproduction.

[awulkan]

@Akryum Interesting. What is considered a mid size app? I have one that's about 100k LOC and a pretty large Vuex store. The only thing that has ever been a problem was the event recorder. I'm running 4.1.5 now without problems.

Would it be possible to make the automatic Vuex state loader not completely reset everything on every load? That's what is rendering it useless for me right now. The state in 4.1.5 doesn't fully reload, it just updates the relevant parts in the UI.

[Akryum]

I just reworked the UI to display the last received state and moved the recording and loading UI to the bottom. This also fixes #941 😸 (pinning an item is no longer necessary).

[koresar]

The "Load state" never loads state for me. But the new switch in settings "always load state" fixes it.