VUE. VUEX. Die Bindung Eingabefeld Ausgabeliste

Question

ich habe:

• eine List
• eine Button
• ein Text-Field

ich die List möchte die Text vom Text-Field, auf einzuarbeiten jeder Button -Klicken.

Ich weiß, dass VUE (X) etwas Magie machen kann.

Wie verbinde ich die Teile richtig?

Answer 1

Wenn Sie vuex verwenden möchten. Erstellen Sie ein Geschäft mit list: [] dann auf die Schaltfläche klicken, auslösen eine Aktion, die eine Mutation begehen und wird ein Element in die Liste ...

index.vue

<template> 
    <div> 
    <input type="text" v-model="newItem"/> 
    <button @click="addItem(newItem)">add</button> 
</div> 
</template> 

<script> 
import { mapActions } from 'vuex' 

export default { 
    data() { 
    return { 
     newItem: '' 
    } 
    }, 
    methods: mapActions(['addItem']) 
} 
</script> 

store.js

hinzufügen

list: [] 

actions.js

addItem: ({commit}, data) => { 
    commit('ADD_ITEM', data) 
} 

mutations.js

[ADD_ITEM] (state, data) { 
    state.list.push(data) 
} 

so etwas wie dieses ...

Die Liste wird direkt nach dem Hinzufügen neuer Artikel autoupdated werden, wenn Sie mapGetters verwenden Listenelemente zu erhalten.