Vue.js Vue和Vuex：根据对视图的更改更新状态

我正在努力构建

呈现表单的应用程序，其中默认输入值等于存储区中的数据

单击“保存”按钮时，状态将根据用户添加到视图中的新数据进行更新

目前，输入绑定到存储数据，因此我没有引用输入的“live”值。当用户单击save时，如何获取“live”值

组件模板

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

潜在解决方案

---

我想我也许可以创建一个存储的“克隆”，并将输入绑定到克隆的条目数据。然后，这个对象将随着视图的更改而更新，这样我就可以获取那些“活动”值，并将数据从视图提交到存储。这是一个好的解决方案吗

如果您希望在用户不必单击按钮的情况下进行更新，那么我建议您

但是，既然您想在单击按钮时执行此操作，请尝试以下操作：

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

拯救
导出默认值{
数据（）{
返回{
项目：{
名称：空，
价格：空，
}
}
},
安装的（）{
//根据存储中的内容设置this.item的默认值
this.item=this.$store.getters.getItem
},
方法：{
updateItem（）{
此.store.commit（'updateItem'，this.item）；
}
}
}

查看文档：，特别是第二段“双向计算属性”。

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