Arrays 将多个表单输入绑定到vuex存储阵列

所以我在Vuex存储中有这个数组，我想将它的字段绑定到表单中的多个输入。我设法让它工作的方式如下：

模板：

            <b-form-input id="CustName2"
                      type="text"
                      v-model="CustName2" :maxlength="50"
                      placeholder="Nombre">
            </b-form-input>
            <b-form-input id="CustAddr"
                      type="text"
                      v-model="CustAddr" :maxlength="50"
                      placeholder="Dirección">
            </b-form-input>
            <b-form-input id="CustPostCode"
                      type="text"
                      v-model="CustPostCode" :maxlength="10"
                      placeholder="Cod. Postal">
            </b-form-input>

store.js：

orderproperties: {
      CustName2: '',
      CustAddr: '',
      CustPostCode: ''
    }

问题是，现在我需要再添加5个属性（表单中再添加5个字段），我觉得可以将单个计算属性作为数组，然后将其绑定到表单中的每个字段；而不是为每个字段创建单个计算属性。问题是setter不会将每个数组元素绑定到每个输入。有没有关于如何重构的想法？现在，对于每个字段，我需要一个计算属性，每个字段需要一个存储变异和一个存储getter。

方法之一：

In store.js添加通用变异

import Vue from 'vue'

export const mutations = {
   updateProp: (state, payload) => {
     const { prop, value } = payload
     Vue.set(state.orderproperties, prop, value)
   },
}

在方法中添加

methods {
  onChange(prop, value) {
    this.$store.commit('updateProp', {prop: prop, value: value})
  },
  getValue(prop) {
    return this.$store.state.orderproperties[prop]
  }
}

模板中

<b-form-input id="CustName2"
  type="text"
  @change="onChange('CustName2', $event)"
  :value="getValue('CustName2')"
  :maxlength="50"
  placeholder="Nombre">


   <b-form-input id="CustAddr"
     type="text"
     @change="onChange('CustAddr', $event)"
     :value="getValue('CustAddr')"
     :maxlength="50"
     placeholder="Dirección">

   ...

...

这种方法很有趣，但我认为这里缺少了一些东西。OnChange方法上没有对通用变异“updateProp”的调用；所以它会抛出一个“未知突变类型”error@JackCasas. 对不起，这是我的错。功能

onChange

已更新

<b-form-input id="CustName2"
  type="text"
  @change="onChange('CustName2', $event)"
  :value="getValue('CustName2')"
  :maxlength="50"
  placeholder="Nombre">


   <b-form-input id="CustAddr"
     type="text"
     @change="onChange('CustAddr', $event)"
     :value="getValue('CustAddr')"
     :maxlength="50"
     placeholder="Dirección">

   ...