Vuex action dispatch display?

[TomKaltz]

Is there a plan to log and display dispatched vuex actions in the devtools?

[posva]

Why would you need to display actions? What affects your store are mutations. I think actions would bloat up the view for no real interest

[gh-23378]

I think that this would be a useful feature. Most of my complex logic happens inside of actions. Each of my mutations is very simple and could be have been dispatched from one of many actions. Viewing mutations is too granular for efficient debugging sometimes.

[posva]

You wouldn't be able to time travel actions anyway

[chanon]

What would be very useful is if it would be possible to display what actions caused which mutations.

Even if it is not possible to do that accurately, just logging out the actions that occurred can help with reasoning about what caused what.

The benefit of uni directional action dispatch is reasoning about data flow. Showing this in log / debug tool is exactly what it should be used for.

[sbward]

I've been working around this by putting console.log statements in all of my actions, but I expect the devtools to have this feature so that I don't have to do it. I need this to help me reason about the flow of activity in my app (mutations alone aren't enough).

[b44rd]

Would there be other scenarios where it could be useful to pass the action name as an optional parameter of the commit function? I so, I believe a parameter like that could be used in order to see from what action a mutation gets called.

Perhaps one scenario where it could be beneficial to have another parameter to the commit function, named something like "calledBy", "callee" or sligtly more likely "action", would be to make the mutations be aware of in which context they are beeing called, and then slightly more instructed on what to do. However, displaying this in a good way inside Vue devtools seems to be a bit harder indeed, due to the asyncronous nature of actions. Some time format that includes ms might do a job though, in order to know when the action was called, and when the mutation was called.

But the question to me, seems to be weather adding another parameter to the commit function adds value or not outside devtools.

Sorry about another duplicate issue, btw. I´ll dig deeper next time indeed! 👍

[motia]

@b44d, having an optional parameter will make code complicated and probably not BC.

Perhaps we can have an alias commit function in development mode. It will log the the (action, commit) pair and call the real commit. This can be better, if actions can have a unique id to group commits they called.

[b44rd]

@motia I very much agree that cluttering the commit function with another parameter doesn´t sound like the best idea. An alias is definitely be a better alternative here, but very curious on what the core team thinks about this, as it doesn´t look like something I have seen around elsewhere yet. But, what if something like these aliases were added when compiling a development bundle?

dispatch__trace(action, payload, calledBy)
commit__trace(commit, payload, calledBy)

Both simply forward to the original function, while they in development mode also log to Vue devtools, using a (temporarily named) 'calledBy' parameter. The reason for also adding an alias for dispatch, btw, is to also be able to know from where this action is called. Was this action called from a component, a plugin, or from a lib etc.

[deini]

As @sbward mentioned:

I need this to help me reason about the flow of activity in my app (mutations alone aren't enough).

Completely agree. IMO even if we can't time travel, having a log of actions/payloads would be really useful to track the whole flow.

[ndabAP]

Would also love to see this.

[deini]

@b44rd Now that we have the ability to do this, wanna sync and give it a shot?