Vue公司和Vuex：更新基于改变状态的视图

Question

我试图建立

呈现一种形式，其中默认的输入值等于从存储器中的数据的应用程序。

点击保存按钮后，将根据用户添加到视图中的新数据更新状态。

当前输入被绑定到商店数据，所以我没有提及输入的“实时”值。当用户点击保存时，我如何获取“实时”值？

组件模板

<input type="text" class="form-control" :value="item.name"> 
<input type="text" class="form-control" :value="item.price"> 
<button class="btn btn-primary" v-on:click="updateItem(item)">Save</button> 

组件

data: function() { 
    return {} 
}, 
methods: { 
    updateItem(item) { 
    this.$store.commit('updateItem', item); 
    }, 
}, 
computed: { 
    items() { 
    return this.$store.getters.getItem; 
    } 
} 

可能的解决方案

我想我也许可以创造一个商店的 “克隆”，并绑定输入到克隆它em数据。然后这个对象会随着视图的变化而更新，所以我可以抓住这些“实时”值，并将视图中的数据提交给商店。这是一个好的解决方案吗？

Answer 1

如果你想在没有用户点击按钮的情况下更新，那么我会建议one of the methods explained in the docs。

但既然你想这样做，他们闻单击按钮，尝试这样的事情：

<template> 
    <form> 
     <input type="text" class="form-control" v-model="item.name"> 
     <input type="text" class="form-control" v-model="item.price"> 

     <button class="btn btn-primary" @click.prevent="updateItem">Save</button> 
    </form> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      item: { 
       name: null, 
       price: null, 
      } 
     } 
    }, 

    mounted() { 
     // Set the default value of this.item based on what's in the store 
     this.item = this.$store.getters.getItem 
    }, 

    methods: { 
     updateItem() { 
      this.$store.commit('updateItem', this.item); 
     } 
    } 
} 
</script>