Как обрабатывать несколько форм ввода в Vuex 4.x?

0

Вопрос

У меня есть компонент Vue с 5 входными элементами. В качестве упражнения по изучению VueX я хотел управлять вводом данных пользователем в магазине Vuex. Предположим, что каждый ввод представляет собой строку в стихотворении. Мое состояние, мутация и действия выглядят так

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

Просматривая документацию, я обнаружил, что могу использовать v-модель как обычно, но с двусторонним вычисляемым свойством: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Но кажется не очень сухим создавать вычисляемое свойство для каждого входного элемента, например:

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

Мой шаблон выглядит так:

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

Как я могу это изменить? Существует ли наилучшая практика управления состоянием нескольких форм?

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

Лучший ответ

0

Вы можете использовать vuex-map-поля

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

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


</script>

и в вашем магазине вы можете импортировать getField и updateField для извлечения и изменения данных

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

2021-11-24 00:36:58

На других языках

Эта страница на других языках

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