मैं एक 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>
कैसे कर सकते हैं मैं refactor यह? वहाँ है एक सबसे अच्छा अभ्यास का प्रबंधन करने के लिए राज्य के कई रूपों?