Come gestire più moduli di immissione in Vuex 4.x?

0

Domanda

Ho una Vue componente con 5 elementi di input. Come un esercizio per imparare VueX ho voluto gestire l'input dell'utente in una Vuex store. Supponiamo ogni ingresso rappresenta una linea in una poesia. Il mio stato, mutazione e azioni simili che

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

Guardando la documentazione, ho scoperto che potevo usare v-modello, come al solito, ma con un calcolato proprietà: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Ma non sembra molto SECCO, per creare una calcolata proprietà per ogni elemento di input, come:

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

Il mio modello simile a questo:

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

Come posso effettuare il refactoring questo? C'è una best practice per gestire lo stato di molteplici forme?

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

Migliore risposta

0

È possibile utilizzare vuex-mappa-campi

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

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


</script>

e nel tuo negozio, è possibile importare i getField e updateField per recuperare e mutare dati

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

2021-11-24 00:36:58

In altre lingue

Questa pagina è in altre lingue

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