如何处理多种输入方式在Vuex4.x？

Question 1

我有一个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>

我怎么可以"重构"这个吗？是有一个最佳做法来管理国家的多种形式吗？

Question 2

你可以使用 vuex-地图的领域

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

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


</script>

在你的商店，您可以进口的 getField 和 updateField 获取和变异的数据

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

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

你可以使用 vuex-地图的领域

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

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


</script>

在你的商店，您可以进口的 getField 和 updateField 获取和变异的数据

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

如何处理多种输入方式在Vuex4.x？

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别