Ako zvládnuť viaceré vstupné formuláre v Vuex 4.x?

0

Otázka

Mám Vue komponentu s 5 vstupné prvky. Ako cvičenie naučiť VueX som chcel spravovať používateľské vstup v Vuex obchodu. Predpokladajme, že každý vstup predstavuje riadok v básni. Môj štát, mutácie a opatrenia vyzerať, ž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')
    },
  },

Hľadáte dokumentáciu zistil som, že by som mohol použiť v-model ako zvyčajne, ale s obojsmerná vypočítaná vlastnosť: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Ale zdá sa, že nie veľmi SUCHÉ vytvoriť vypočítaná vlastnosť pre každý vstupný prvok rád:

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 šablóny vyzerá 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>

Ako môžem refactor to? Je tam najlepšie riadiť štát viacero foriem?

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

Najlepšiu odpoveď

0

Môžete použiť vuex-mapa-polia

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

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


</script>

a vo vašom obchode, môžete importovať getField a updateField na zisťovanie a mutovať údajov

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

2021-11-24 00:36:58

V iných jazykoch

Táto stránka je v iných jazykoch

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