正确的方法来动态设置许多输入值，从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模型并单独填写。有没有一种更好，更动态的方法来实现这一目标？

编辑：我只想有很好的方式来更新对象。当创建新的 - 我不需要任何填充任何东西的输入。编辑时 - 将旧数据加载到输入中会很好。我喜欢它是动态的，而不是为每个输入编写模型并从商店返回特定值。就像我在将更新保存到商店时一样：这只是所有输入的一种方法。

Vue提供了一种方法来做到这一点？

Answer 1

导出功能，将在存储文件 // store.js

import {CurriculumVitae} from 'data'

实例化的函数返回的数据 // data.js

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

导入功能。 //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 --> 

见，如果这个工程。