Comment gérer plusieurs formes d'entrée dans Vuex 4.x?

Question 1

J'ai une Vue de composant avec les 5 éléments d'entrée. Comme un exercice pour apprendre VueX je voulais gérer la saisie de l'utilisateur dans un Vuex magasin. Supposons chaque entrée représente une ligne d'un poème. Mon état, de mutation et d'actions ressembler à ça

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

À la recherche de la documentation, j'ai trouvé que je pouvais utiliser le v-modèle comme d'habitude, mais à une propriété calculée: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Mais il ne semble pas très SEC pour créer une propriété calculée pour chaque élément d'entrée aime:

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

Mon modèle ressemble à ceci:

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

Comment puis-je refactoriser cette? Est-il des pratiques exemplaires pour la gestion de l'état de multiples formes?

Question 2

Vous pouvez utiliser vuex-carte-champs

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

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


</script>

et dans votre magasin, vous pouvez importer les getField et updateField de récupération et de muter de données

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

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

Vous pouvez utiliser vuex-carte-champs

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

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


</script>

et dans votre magasin, vous pouvez importer les getField et updateField de récupération et de muter de données

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

Comment gérer plusieurs formes d'entrée dans Vuex 4.x?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie