VUE。 VUEX。绑定输入域输出列表

Question

我：

• 一个List
• 一个Button
• 一个Text-Field

我想的List从Text-Field纳入Text，上每个Button - 点击。

我知道VUE（X）能够做一些魔法。

如何正确连接这些部分？

Answer 1

如果你想使用vuex。与list: [] 然后在点击按钮创建一个店，触发就会犯突变，将项目添加到列表中的动作...

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

list: [] 

actions.js

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

mutations.js

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

这样的事情...

名单将于如果你使用mapGetters获取列表项增加新的项目之后立即autoupdated。