Development mode: Action/mutation log for Vue devtools

[b44rd]

What problem does this feature solve?

Referencing to vuejs/devtools-v6#179

A pretty sweet development feature would be to add another tab inside Vue devtools that track the flow of actions and mutations. The suggestion is to allow a function such as devtools.log inside store.dispatch and store.commit that holds the passed params. I´ve been using a custom library to do this for a while (b44rd/jsbug), and it sure provides another level of debuggability. The problem though, is that I currently need to add a line of code inside each action/mutation to achieve this overview.

For instance, when dispatching an action, this might look like this inside a new tab inside Vue devtools:

▶ Action: [actionName] [timestamp]

When clicked, this can be expanded, such as

▼ Action: [actionName] [timestamp]
  {
    points: 1
  }

The result list then visible in Vue devtools might then look like this. Note: Making actions print in a different color than mutations makes it really easy to follow the flow

▶ Action: "init" 10:00:002
▶ Mutation: "INIT" 10:00:004
▶ Action: "jump" 10:01:026
▶ Mutation: "JUMP" 10:01:031
▼ Action: "collectPoint" 10:02:005
  {
    points: 1
  }
▼ Mutation: "SET_STATUS" 10:02:015
  {
    points: 1,
    status: 'hero'
  }

What does the proposed API look like?

I believe it can be an alternative to extend Vue.config to enable/disable this feature. But the overall idea is to enabling vue-devtools to be able to read from two functions, such as

devtools.logAction('actionName', payload)
devtools.logMutation('mutationName', payload)

[b44rd]

Closing and instead opening vuejs/vuex#908 as I discover this doesn´t really affect vue.