管理变异Vuejs

Question

这是管理突变的正确方法吗？

我的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>

我的计算属性：

 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);
          }
      },

我的突变：

merchantName(state, merchantName){
            state.merchant.name = merchantName
        },
        merchantId(state, merchantId){
            state.merchant.merchant_id = merchantId
        },

有没有办法只在商家中改变？因为我需要一个接一个地做。

merchant(state, merchant){
        state.merchant = merchant
    },

这是我的商家对象。

Answer 1

您可以在输入字段的末尾添加一个按钮，并添加一个点击侦听器，以便为商家对象的有效负载提交变异。

示例

<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>

<强>脚本

export default{
    data(){
        return{
            merchant:{
                merchantId:'',
                merchantName:'',
                merchantEmail:''
                //more properties binded to the v-model
            }
        }
    },
    methods:{
        click(){
            this.$store.commit('merchant', this.merchant);
        }
    }
}

你的突变

merchant(state, merchant){
        state.merchant = merchant
    },