Vuex 4'te birden çok giriş formu nasıl işlenir.x?

Question 1

5 Giriş elemanına sahip bir Vue bileşenim var. Vuex'i öğrenmek için bir alıştırma olarak, bir Vuex mağazasındaki kullanıcı girişini yönetmek istedim. Her girdinin bir şiirdeki bir satırı temsil ettiğini varsayalım. Durumum, mutasyonum ve eylemlerim şuna benziyor

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

Belgelere baktığımda, v modelini her zamanki gibi kullanabileceğimi, ancak iki yönlü hesaplanmış bir özellik kullanabileceğimi buldum: https://next.vuex.vuejs.org/guide/forms.html#two-way-computed-property

Ancak, her giriş öğesi için hesaplanmış bir özellik oluşturmak çok kuru görünmüyor:

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

Şablonum şuna benziyor:

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

Bunu nasıl yeniden düzenleyebilirim? Birden çok formun durumunu yönetmek için en iyi uygulama var mı?

Question 2

Vuex-map-alanlarını kullanabilirsiniz

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

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


</script>

ve mağazanızda şunları içe aktarabilirsiniz: getField ve updateField veri almak ve mutasyona uğratmak için

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

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

Vuex-map-alanlarını kullanabilirsiniz

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

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


</script>

ve mağazanızda şunları içe aktarabilirsiniz: getField ve updateField veri almak ve mutasyona uğratmak için

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

Vuex 4'te birden çok giriş formu nasıl işlenir.x?

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride