를 처리하는 방법을 여러 입력 폼에 Vuex4.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 맵-필드

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

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


</script>

고 당신의 상점에서,당신은 당신을 가져올 수 있습니다 getFieldupdateField 를 가져오기 및 변형의 데이터

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

2021-11-24 00:36:58

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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