Vue-devtools: Filtering

[dddomin3]

Vue(x) Dev Tools should have a ability to filter both state, and mutation names.
If possible, having the ability to categorize mutations with a string, enum, and/or a log level. Either through special dispatch attributes that are only considered/passed to dev middlewares, or whatever is a better implementation.

I feel as though the vuex dev tools quickly gets filled. When mutations involving many different interactions (API state, page state, component lifecycle state) all end up all in one flat list, it's hard to track an issue in a specific functionality.

[stealthybox]

Maybe we should PR Vuex to modify the Object-Style Dispatch to include a category parameter?

This is where we would start adding that to make it consumable by the devtools:
https://github.com/vuejs/vuex/blob/master/src/index.js#L84

[Namek]

I would be happy to have a simple text input that would filter by action names (maybe some regex).

My case:
I've implemented a small in-app calendar where some mouse down/up/enter/leave events are triggered and based on those events some calendar days are selected to be further processed.

mouseenter is the worst event, because I have action dispatched for it so it messes action list in Vuex DevTools very quickly. Which obviously makes debugging a lot harder.

[stealthybox]

@Namek, as a temporary workaround, you can switch to the Object-Style Dispatch and use the silent flag for your MOUSE_ENTER mutations.

Hopefully, we can all pool together to get this implemented soon.

[posva]

Hey @dddomin3, sorry for the delay.
About filtering mutations, it's now possible. If you organise your store using modules, you can easily filter mutations of one module.
About filtering the state. I'm not sure to understand that from a UX perspective. Can you explain the case when you see yourself _filtering_ the state?

[dddomin3]

Sure! Sorry for my late response. The mutation filtering improvements are great! Good job there :+1:

As for state filtering:
Let's say I'm working on populating a certain piece of the state (like a user's detailed data). It'd be nice to be able to specify user.details.favoriteColor, and only display that in the store. Almost like _.get() from lodash:
https://lodash.com/docs/#get
Although, there may be a better way to UX that, that's just my imagining of it.

Honestly though, from my point of view, though, being able to filter mutations really captures the spirit of my request. I should be a lot more atomic with my suggestions!

[posva]

yeah, or even better, writing user details favoritecolor

[michalsnik]

Hey, I think we should close this issue already. Main request has been resolved wasn't it?
Would you please add a separate issue with just the last suggestion regarding updating state filtering (support for filtering nested structures) if it's still relevant @dddomin3 ?
It would be easier to talk clean about new improvements. Thanks!

[Akryum]

State filtering is implemented in #418.

[akoidan]

@stealthybox

@Namek, as a temporary workaround, you can switch to the Object-Style Dispatch and use the silent flag for your MOUSE_ENTER mutations.

Could you please give an example how to use this "silent" flag?

I'm using

XmlHttpRequest.upload.addEventListener('progress', e => this.store.commit({
  type: 'setMessageProgress',
  silent: true, // you told about that flag or what? I didn't find anything at documentation nor in devtools sources
  uploaded: e
}));

In the end of the day vue devtools just hangs cause it can't handle thousand of messages from progress. Is there a way I just can remove them from displaying in it?

p.s. I don't wanna reduce amount of commit messages

[posva]

Stop recording by clicking the red dot

[stealthybox]

@Deathangel908, I see the Vuex dispatch still has code for the silent prop.
I don't use Vue right now, so you'll need to look into how the DevTools are supposed to work with it yourself.

Here's the implementation: https://github.com/vuejs/vuex/blob/10be6af/src/index.js#L99-L135

[akoidan]

@posva but I do wanna record other actions

[maksnester]

Quite weird that when filter is used it filters out mutation section, and because of that I can't see the payload.

[michalsnik]

Feel free to open new issue with your concern @Alendorff :)