Menu
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
742
Actions are similar to mutations, the differences being that: Instead of mutating the state, actions commit mutations. Actions can contain arbitrary asynchronous operations.
In Vuex, actions are functions that call mutations. Actions exist because mutations must be synchronous, whereas actions can be asynchronous. You can define actions by passing a POJO as the actions property to the Vuex store constructor as shown below. To "call" an action, you should use the Store#dispatch() function.
Vue Devtools 6 supports Vue 3 and as of right now it's in beta and available for Chrome and Firefox.
In Vuex, mutations are synchronous transactions: store. commit('increment') // any state change that the "increment" mutation may cause // should be done at this moment.
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
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
