Question

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

模板：

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

计算：

 computed: {
    
    CustName2: {
        get () {
            return this.$store.state.orderproperties.CustName2
        },
        set (value) {
            this.$store.commit('SetCustName2', value)
        }
    },
    CustAddr: {
        get () {
            return this.$store.state.orderproperties.CustAddr
        },
        set (value) {
            this.$store.commit('SetCustAddr', value)
        }
    },
    CustPostCode: {
        get () {
            return this.$store.state.orderproperties.CustPostCode
        },
        set (value) {
            this.$store.commit('SetCustPostCode', value)
        }
    }
}

store.js：

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

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

Answer 1

方法之一：

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

   ...

将多个表单输入绑定到 vuex 存储数组

1 个答案: