Vuex best practices or how to do it right?

Question

Vue.js

There is a state with a certain set of properties

prop1: 0,
prop2: "",
prop3: [],

What is the best way to change values?

• In one mutation that changes all fields of the state
  
• For each property a separate mutation
  

And a question about data validation:

1. Validate at the input location (component) and then call action via dispatch
   
2. Validate in action and then update with a mutation
   
3. Validate directly in mutation
   

Where can I read how to do it right?

Answer 1

All data in state should be logically divided into modules. All commits must also be logically separated within each module. Personally, I prefer not to create a root store at all - everything is in submodules.
As for validation, Aetae wrote everything correctly .
Personally, I use the following approach. It is not the best, and not always suitable.
- All components call only action
- Commits are called only inside and action after all checks and validations.
- All commits are designed to receive obviously correct data.
Thus:
mutation is a low-level tool for managing storage.
action is a high-level storage management manager that checks all data, performs any additional manipulations, transformations, splits large data into parts if necessary, and so on, and only then transfers ready-made data to mutation.
component is a store user. Which does not cause mutation directly, but only causes action. And in exceptional cases, it can get direct access to the repository, bypassing any checks and changes by causing a direct mutation.

Answer 2

Everything should be within the logical, not technical division, this is not only about Vue.
If you are validating the input, it is part of the input and has nothing to do with the state. If you're validating third party data - that's part of "getting third party data", etc.
It is the same with changing the state - if one logical operation requires changes to several elements of the state, then it must be performed by one operation.