Cómo manejar múltiples formularios de entrada en Vuex 4.x?

0

Pregunta

Tengo un Vue componente con 5 elementos de entrada. Como un ejercicio para aprender VueX quería manejar la entrada de usuario en un Vuex de la tienda. Supongamos que cada entrada representa una línea de un poema. Mi estado, la mutación y las acciones aspecto que

state: {
    poem: {
      line1: '',
      line2: '',
      line3: '',
      line4: '',
      line5: '',
    }
  },
  mutations: {
    setPoem(state, line) {
      state.poem = {...state.poem, ...line}
    },
    resetPoem(state) {
      state.poem = {
        line1: '',
        line2: '',
        line3: '',
        line4: '',
        line5: '',
      }
    }
  },
  actions: {
    setPoem({commit}, line) {
      commit('setPoem', line)
    },
    resetPoem({commit}) {
      commit('resetPoem')
    },
  },

Mirando la documentación que me di cuenta de que podía usar v-modelo como de costumbre, pero con un camino de dos calculada de la propiedad: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Pero parece que no muy SECO para crear un calculada de la propiedad para cada elemento de entrada igual a:

computed: {
            line1: {
                get() {
                    return this.$store.state.poem.line1;
                },
                set(value) {
                    this.$store.dispatch('setPoem', {line1: value})
                }
            },
            line2: {
                get() {
                    return this.$store.state.poem.line2;
                },
                set(value) {
                    this.$store.dispatch('setPoem', {line2: value})
                }
            },
            line3: {
                get() {
                    return this.$store.state.poem.line3;
                },
                set(value) {
                    this.$store.dispatch('setPoem', {line3: value})
                }
            },
            line4: {
                get() {
                    return this.$store.state.poem.line4;
                },
                set(value) {
                    this.$store.dispatch('setPoem', {line4: value})
                }
            },
            line5: {
                get() {
                    return this.$store.state.poem.line5;
                },
                set(value) {
                    this.$store.dispatch('setPoem', {line5: value})
                }
            }
        },

Mi plantilla se parece a esto:

<form class="form-group" v-on:submit.prevent="addDocument">
            <input v-model="line1" type="text" />
            <p class="error">{{errorMsg1}}</p>
            <input v-model="line2" type="text" />
            <p class="error">{{errorMsg2}}</p>
            <input v-model="line3" type="text" />
            <p class="error">{{errorMsg3}}</p>
            <input v-model="line4" type="text" />
            <p class="error">{{errorMsg4}}</p>
            <input v-model="line5" type="text" />
            <p class="error">{{errorMsg5}}</p>
            <button type="submit">Send Poem</button>
        </form>

¿Cómo puedo refactorizar esto? Es allí una de las mejores prácticas para administrar el estado de las múltiples formas?

dry forms vue.js vuejs3
2021-11-23 22:25:31
1

Mejor respuesta

0

Usted puede utilizar vuex-mapa-campos

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    ...mapFields([
      'poem.line1',
      'poem.line2',
      'poem.line3',
      // ...
    ]),
  },
};


</script>

y en su tienda, usted puede importar el getField y updateField para buscar y mutar de datos

...
getters: {
  getField,
},
mutations: {
  updateField,
}

2021-11-24 00:36:58

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................