Managing Mutations Vuejs - vue.js

Question

Is this correct way of managing mutations?
My HTML
<div class="form-group">
<label>Merchant Id No:</label>
<input type="text" class="form-control border-input" v-model="merchantId">
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control border-input" v-model="merchantName">
</div>
My Computed Properties:
merchantId: {
get(){
return this.merchant.merchant_id
},
set(value){
this.$store.commit('merchantId', value);
}
},
merchantName: {
get(){
return this.merchant.name
},
set(value){
this.$store.commit('merchantName', value);
}
},
My Mutations:
merchantName(state, merchantName){
state.merchant.name = merchantName
},
merchantId(state, merchantId){
state.merchant.merchant_id = merchantId
},
Is there a way to mutate only in the merchant? Because I need to do it one by one.
merchant(state, merchant){
state.merchant = merchant
},
Here is my merchant Object.

Answer 1

You can add a button at the end of your input fields and add a click listener to commit a mutation withe the payload of merchant object.
Example
<div class="form-group">
<label>Merchant Id No:</label>
<input type="text" class="form-control border-input" v-model="merchant.merchantId">
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control border-input" v-model="merchant.merchantName">
</div>
<div class="form-group">
<label>Name:</label>
<input type="email" class="form-control border-input" v-model="merchant.merchantEmail">
</div>
// more input fields...
<button #click.prevent="save">Save merchant<button>
script
export default{
data(){
return{
merchant:{
merchantId:'',
merchantName:'',
merchantEmail:''
//more properties binded to the v-model
}
}
},
methods:{
click(){
this.$store.commit('merchant', this.merchant);
}
}
}
And your mutation
merchant(state, merchant){
state.merchant = merchant
},