การจัดการกับหลายข้อมูลในแบบฟอร์ม Vuex 4.เอ็กซ์?

ฉันมี 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')
    },
  },

มองหาเอกสารที่ฉันพบว่าฉันสามารถใช้ขีปนาวุธมาเจอกับนางแบบมากเหมือนเดิมแต่มีสองทางทรัพย์สินส่วนที่คำนวณแล้ว: 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>

ยังไงฉัน refactor เรื่องนี้? คือมันที่ดีที่สุดที่ฝึกซ้อมที่จะจัดการสถานะของหลายแบบฟอร์ม?