You're also going to end up creating a TON of boilerplate code to handle all your mutations. Mapping to Vuex values with one-way :value/@input events, or a get/set computed property is easy if your data is flattened but when you're dealing with large objects and tons of form fields that need to map to nested properties, you end up creating a bunch of actions and mutations to deal with everything. Alternatively, you save your state locally and use v-model to update the fields easily, then you commit to the store on submit. This approach is better with large data sets, so you're not commiting to the store with every field change, but great care has to be taken in order to not mutate the data in the store directly. You must deep clone your objects.
An easier approach with such big objects, is you deepClone them when you're going to edit them.
If the user changes anything, you save the changes; If the user cancels, you destroy the clonedObject.
That way your data remains untouched (whether you brought it from an API, or from Vuex) and you can still submit changes back.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You're also going to end up creating a TON of boilerplate code to handle all your mutations. Mapping to Vuex values with one-way :value/@input events, or a get/set computed property is easy if your data is flattened but when you're dealing with large objects and tons of form fields that need to map to nested properties, you end up creating a bunch of actions and mutations to deal with everything. Alternatively, you save your state locally and use v-model to update the fields easily, then you commit to the store on submit. This approach is better with large data sets, so you're not commiting to the store with every field change, but great care has to be taken in order to not mutate the data in the store directly. You must deep clone your objects.
An easier approach with such big objects, is you deepClone them when you're going to edit them.
If the user changes anything, you save the changes; If the user cancels, you destroy the clonedObject.
That way your data remains untouched (whether you brought it from an API, or from Vuex) and you can still submit changes back.