Using mutation handlers requires you to write hundreds of times more code compared to direct mutations (in large apps, if you follow official guidelines) because they require computed properties and store mutations for every nested state property.
I know that not using mutation handlers, in theory, makes it more difficult to track down the source of some errors, but in practice, if there's only a few functions that change a specific state property, it's pretty easy to determine which one of them caused the error by following the event logic because mutations are in most cases caused by some sort of known event (button press, input change, etc), so when an error appears during a specific event, it's not that difficult to track down the function that caused it, without using mutation handlers anyway.
The question is what do you actually lose if all components mutate store data directly without using mutation handlers (except debugging)?
Like this, for example:
App.vue
<v-btn @click="createNewItem({ type: 'file', extension: 'txt' })">
Create new item
</v-btn>
methods: {
createNewItem (params) {
// Set dialog data
this.$store.state.dialogs.createNewItemDialog.data = {
...this.$store.state.dialogs.createNewItemDialog.data,
...params
}
// Open dialog
this.$store.state.dialogs.createNewItemDialog.isOpened = true
}
}
Dialogs.vue
<v-dialog v-model="$store.state.dialogs.createNewItemDialog.isOpened">
<div class="title">
Create new {{$store.state.dialogs.createNewItemDialog.data.type}}
</div>
<v-text-field
v-model="createNewItemDialog.data.name"
/>
<v-btn @click="$store.state.dialogs.createNewItemDialog.isOpened = false">
close dialog
</v-btn>
</v-dialog>
// NO COMPUTED PROPERTIES NEEDED
store.js
state = {
dialogs: {
createNewItemDialog: {
value: false,
data: {
type: 'file',
name: '',
extension: ''
}
}
}
}
// NO MUTATIONS AND ACTIONS NEEDED
