Should actions be preferred over mutations in Vuex?

Question

Vue.js

Good day.
Intuitively, I regard mutations as a low-level layer, to which (as well as to the state) it is better not to give access from the outside (from components). In this regard, I create a couple of general mutations (for example, SET_MENU_STATE) to generically control a specific part of the state; and I make special cases into actions (for example, MENU_OPEN, MENU_CLOSE). It is convenient because in the action you can collect several mutations for the desired properties of the store, and there is a single input layer.

But isn't this redundant? Are there any best practices for organizing mutations / actions, in addition to the case described in the documentation (actions for API calls)?

Thanks in advance.

Answer 1

Mutations are strictly synchronous short procedures containing only state change logic.
Actions - possibly asynchronous procedures related to business logic and causing mutations to change state.
So you are doing everything right. Business logic - open menu. To do this, you need to change the state by setting the status of the menu to "open".
If tomorrow you need to preload it from the site before opening the menu, you will change the action, and the mutation will remain as it is.