12

I'm working on a vue app that has a store module that emits 50 events per second in certain scenarios. Those events are causing a vuex mutation to be commited each time. That makes it hard to use vue-devtools in other places since I cannot see any other events or mutations and within half a minute vue-devtools becomes unresponsive and it crashes.

I'm wondering if there is a way how to exclude certain vue events and vuex mutations from being rendered in vue-devtools.

Does anyone have a good idea how this could be done?

Best, Christian

Gambo
  • 4,790
  • 2
  • 14
  • 14
  • 2
    For reference: https://github.com/vuejs/vue-devtools/issues/649 https://github.com/vuejs/vue-devtools/issues/546 – tony19 May 26 '18 at 16:26

1 Answers1

3

So, unfortunately, the current Vue DevTools can address only one of your problems: the Vuex Mutations. In the Vuex tab, you can apply RegEx to filter out unnecessary events. This way, even if your app generates a lot of events, you can filter out the noise and keep your Vue DevTools from crashing.

What I'd imagine is you'd have a RegEx that filters out that volume of events you mentioned. For example, if I wanted to filter out a mutation called NOISY_MUTATION, you might drop this RegEx into the Vuex filter: /^((?!NOISY_MUTATION).)*$/

Now, the bad news. Unfortunately, Events don't seem to have a RegEx filter and instead just performs a simple toLowerCase match.

I've got a PR out to the Vue DevTools repo that addresses this, so hopefully it can land in some version if they deem it to be a worthy addition: https://github.com/vuejs/vue-devtools/pull/838

Good luck!

Eric

grales
  • 306
  • 2
  • 10