As far as I understand there are two suggested ways of dealing with complex form data with Vuex but I’m having issues with each and I’d love some direction.
1. :value and @change
Based on topics like this I’ve been led to believe that the optimal way to handle forms with Vuex data is to set the computed property with :value and then commit to the store on @change. This approach works but results in vue methods like
update: function (key, value, subkey) { let update = {} if (subkey !== undefined){ update = { [subkey]: { [key]: value } } } else { update = { [key]: value } } this.$store.commit('UPDATE_VALUE', update) }
and $store.mutations like
UPDATE_VALUE (state, value) { _.merge(state.person, value) }
this strikes me as overly verbose and kind of brittle but I’ve not found a more logical way to work with complicated objects. Am I missing something?
2. Initialize and save
The other suggestion I’ve seen is to work with the data in a local model and then submit it to Vuex on save if the UI allows.
I’ve set the store data to local like this
data () { return { person: _.cloneDeep( this.$store.state.person) } }
which works until I save with this mutation
UPDATE_DATA (state, payload) { state.person = payload }
at which point every additional update throws the illegal mutation error:
[vuex] Do not mutate vuex store state outside mutation handlers.
I’m sure this has something to do with the way I’m initially cloning the data but I can’t figure it out.
Any suggestions on either would be appreciated or - if I’m missing a better way to handle form data - I’d love to learn