Jak zpracovat více vstupních formulářů v Vuex 4.x?

Question 1

Mám Vue složkou s 5 vstupních prvků. Jako cvičení se učit VueX jsem chtěl řídit vstup uživatele v Vuex obchod. Předpokládejme, že každý vstup představuje řádek v básni. Můj stav, mutace a akce vypadá, že

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

Při pohledu do dokumentace jsem zjistil, že jsem mohl použít v-model, jako obvykle, ale s dvou-way počítačová nemovitosti: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Ale zdá se, není velmi SUCHOU vytvořit vypočítaný vlastnost pro každý vstupní prvek jako:

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

Moje šablona vypadá takto:

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

Jak mohu refaktorovat? Je tam nejlepší praxe pro správu státu více forem?

Question 2

Můžete použít vuex-mapa-pole

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

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


</script>

a ve vašem obchodě, můžete importovat getField a updateField pro načtení a mutovat údaje

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

OLLY · Answer 1 · 2021-11-24T00:36:58

Můžete použít vuex-mapa-pole

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

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


</script>

a ve vašem obchodě, můžete importovat getField a updateField pro načtení a mutovat údaje

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

Jak zpracovat více vstupních formulářů v Vuex 4.x?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii