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

Question

我来自React背景,它足以从一个道具设置你的状态,你可以调用setState({...})更新状态,所以,使用vue/vuex,我发现它很难.

简化:

Vuex州

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
}

名字显示在templete中 <pre>{{ name }}</pre>

Answer 1

哟可以使用计算机设定器

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

并在标记中设置v-model为computed属性:name<input>

<input v-model="name" />

这是工作的jsfiddle