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

Posted 2023-02-22

【中文标题】将多个表单输入绑定到 vuex 存储数组

【英文标题】：Bind multiple form inputs to vuex store array

【发布时间】：2021-07-24 10:47:58

【问题描述】：

所以我在 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>

计算：

 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。

【参考方案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">

   ...

【讨论】：

这种方法很有趣，但我认为这里缺少一些东西。 OnChange 方法上没有调用通用突变“updateProp”；所以它会抛出一个“未知突变类型”错误

@JackCasas。对不起，是我的错。函数onChange已更新