Proper way to dynamically set many inputs values, getting data from Vuex store

Question

I'm pretty new to Vue. I have large form with many inputs. I want to have all data stored in Vuex store as properties of a class.

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

I can easly update values like that:

<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;
        }
    }

How I could insert a CurriculumVitae class instance filled with data into store, and have all inputs prefilled with it's data automatically? I wouldn't want to have to write v-model for every input and fill it individually. Is there a nice, more dynamic way to achieve that?

Edit: I just want to have nice way to update objects. When creating new one - I don't need any input filled with anything. When editing - it would be nice to load old data into inputs. I like it to be dynamic though, not to write model for each input and return specific value from store. Sth like I do when saving updates into store: it's just one method for all inputs.

Does Vue provide a way to do that?

Raju KC Raju KC · Accepted Answer · 2017-11-12T06:53:12

Export a function that will return data // data.js

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

Import the function in a store file // store.js

import {CurriculumVitae} from 'data'

Instantiate the function. //store.js

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

In a component file // myComponent.vue

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

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

See if this works.

Proper way to dynamically set many inputs values, getting data from Vuex store

1 Answers