How can I get vue DevTools to automatically commit vuex mutations? How can I get vue DevTools to automatically commit vuex mutations? vue.js vue.js

How can I get vue DevTools to automatically commit vuex mutations?


The down arrow (labelled "Commit All") only "commits" mutations in the Vuex history of the dev-tools. This mutation history allows you to inspect individual mutations and the state as it was when they were applied. It's only a debugging aid with state snapshots.

Clicking "Commit All" simply squashes all the mutation history into a new "Base State". In other words, it discards the mutation history if it's too long for your needs. However this has nothing to do with committing mutations in the Vuex store however. The Vuex store always contains the latest state including all the mutations.

So really I can't see the point in automatically clicking the down arrow because that is only debugging information which should be controlled explicitly as needed.


I ran into this behavior as well. I don't know if this applies to your problem, but as I did find how to resolve it, I figured I would mention it here for someone's use in the future.

Any Vuex getters are calculated based on specific state objects of the Vuex instance. The getter determines what state objects it is based on and only updates if one of the state objects it is based on is modified in some way. This is done for performance reasons, so you don't have to recalculate all getters each time any state value is changed.

In my case, the mutation modified a property that was not present when the getter was initialized. Thus the Vue instance did not know that the getter needed to be updated. By resetting the mutations to a new Base State, the getter then recognized that it really should be based on this property and thereafter updated reactively whenever the property was changed.

This was resolved by adding the recalcitrant property to the Vuex state instance at the outset so that the getter updated whenever the property changed.

As covered here

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value.

And also here:

Ideally, try to initialize your state with all desired fields upfront.

Hope this helps someone!