I am currently working on developing a form that pulls data from a Vuex store, allowing users to update the form fields and then submit when they are ready.
Most tutorials I have seen use v-model with computed get() and set() to retrieve values from the store and directly update them.
However, I would prefer to enable users to make changes to the form intuitively and then decide whether to update or cancel. Canceling should reset the form to its original state values.
Currently, I have only managed to implement the v-model method, but it is not ideal as it affects all instances where the state value is used, potentially impacting logic prematurely before submission.
<v-text-field v-model="displayName"></v-text-field>
...
computed: {
...mapGetters(['currentUser']),
displayName: {
get() {
return this.currentUser.name
},
set(value) {
this.$store.dispatch('updateName', value);
},
},
}
I am struggling to display the current state in a Vue-like manner while also updating the state only when a button is pressed. Are there any good tutorials available for this?
My idea involves updating a temporary state and then applying those updates to the actual state and database upon submission. What do you think of this approach?
I referenced this tutorial https://medium.com/js-dojo/maintaining-a-single-source-of-truth-while-handling-form-data-with-vuex-426e86d16642