Why use a "action" to commit a "mutation" ?

[zhangqiangoffice]

I don't know why you use a "action" to commit a "mutation" in the "src/vuex-i18n-store.js". I'm not very familiar with Vuex. Are there any benefits of such a design？

[tikiatua]

Hi @zhangqiangoffice

This is the recommended vuex flow. Components should only ever trigger actions, which in turn commit mutations to change the state. A component should not directly call a mutation and an action should not directly modify state. This helps to keep the flow of the application organized once it gets larger. Also all mutations can be inspected in the vue devtools in chrome.

[zhangqiangoffice]

Where is the recommended vuex flow? I can't find it on the website "https://vuex.vuejs.org"

[tikiatua]

You can find a good illustration directly on the start page of the vuex documentation.

However, the documentation is somewhat hard to grasp, when starting out with vuex. There should be some talks in youtube that explain it quite well.

It basically boils down to components dispatch (async) actions, actions commit synchronous mutations, mutations change state in the store.

Then there are some helper functions to make common things a little easier to write.