多くの入力値を動的に設定する適切な方法、Vuexストアからのデータの取得

Question

私はVueを使い始めました。私は多くのインプットを持つ大きなフォームを持っています。私はすべてのデータをクラスのプロパティとしてVuexストアに保存する必要があります。

const store = new Vuex.Store({ 
    state: { 
     cv: new CurriculumVitae() 

私がイースリーそのような値を更新することができます

<input @input="updateValue" name="name"> 
... 
methods: { 
    updateValue(e) { 
     this.$store.commit('updateValue', {field: e.target.name, value: e.target.value}); 
    } 
}, 
.... 
const store = new Vuex.Store({ 
    mutations: { 
     updateValue (state, payload) { 
      state.cv.data[payload.field] = payload.value; 
     } 
    } 

私は、ストアへのデータで埋めCurriculumVitae classインスタンスを挿入し、すべての入力が自動的にそれのデータがあらかじめ入力されている可能性がどのように？私は、すべての入力に対してv-modelを記述し、個々に入力する必要はありません。それを達成するための素晴らしい、よりダイナミックな方法はありますか？

編集：私はちょうど良い方法をオブジェクトを更新したいです。新しいものを作成するときには、何も入力されていない入力は必要ありません。編集時には、古いデータを入力に読み込むといいでしょう。私はそれが動的であることが好きです。各入力のモデルを書いておき、ストアから特定の値を返すのではありません。アップデートを店舗に保存するときと同じように、それはすべての入力に対して1つの方法です。

Vueはこれを行う方法を提供していますか？

Answer 1

エクスポートデータ // data.js

export function CurriculumVitae() { 
    return {data: {name: 'John Doe', gender: 'Male'} } 
} 

インポートを返す関数ストア・ファイル内の関数 // store.js

import {CurriculumVitae} from 'data'

機能をインスタンス化します。 //store.js

const store = new Vuex.Store({ 
state: { 
    cvs: CurriculumVitae() // here 

コンポーネントファイルで

// myComponent.vue

computed: { 
    cvs(){ 
     return store.state.cvs // here 
    } 
} 

<input type="text" :value="cvs.data.name"> <!-- here --> 

これが動作するかどうかを参照してください。