Question

我来自React背景，它只是足以从道具设置你的状态，你可以调用setState({...})来更新状态，所以，使用vue / vuex，我觉得很困难。

简化：

Vuex State

name: "Foo bar"

Vuex行动

addName

我可以更改状态没问题，但我需要绑定一个输入字段，当更改时，状态会更新。可以将此视为一个更新表单，其中用户详细信息已经预先填写，并且可以更改其名称。

<input @change="addName(newName) v-model="newName" />

我可以添加watch来监听newName并更新状态，但是，我需要预先填充输入状态。哈！我可以使用beforeMount()但我的状态尚未加载。

computed: {
  ...mapState([
  'name'
  ]),
},
beforeMount() {
  // this.newName = this.name
  console.log('Mounted') // Shows in console
  console.log(this.name) // nothing
}

名字显示在模板<pre>{{ name }}</pre>

中

Answer 1

哟可以使用computed setter

computed:{
    name:{
        get: function(){ 
            return store.state.name; 
        }, 
        set: function(newName){ 
            store.dispatch('addName',newName); 
        }
    }
} 
enter code here

并将v-model设置为name标记中的计算属性<input>：

<input v-model="name" />

这是工作jsfiddle

如何绑定输入字段并同时更新vuex状态

1 个答案: