Is it bad to commit mutations without using actions in Vuex?

Question

I have been using Vuex for awhile now, and I have always been following the pattern: Components use Actions to commit Mutations to mutate the Store. I thought this was the proper way to do things considering this diagram from the docs:

I came across code where people were committing mutations directly in components, and not even creating simple actions which have no purpose other than to trigger mutations. I even found several examples of this in the Vuex docs.

I figured since it's used in the docs this must be an acceptable pattern, and I was wondering if skipping Actions and directly triggering Mutations was a pattern endorsed by any other state management libraries such as Redux of Flux itself.

TLDR: Is it ok to commit mutations directly in Vuex, and if so, do other state management libraries such as Redux use a pattern like this? If so why don't they?

Answer 1

Just keep in mind that mutations have to be synchronous. You can commit directly in components if you (and your team) are sure is there no chance of appearing of something async. In other words, use it with simple and direct operations.

Committing only in actions as a rule adds some clarity and reliability to application's code.

I didn't used Redux, but as far as I know, some state managers have middleware. Using mutations and action (Vuex-way) may cause a difficult maintenance into large applications.

In the future version of Vuex, mutations and actions should be merged into the one entity.