Search code examples
vue.jsvuexvue-devtools

Is it possible to exclude vue events and vuex mutations from vue-devtools?


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


Solution

  • 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