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

Question

我来自 React 背景，从一个 prop 设置你的状态就足够了，你可以调用 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
}

名称显示在模板<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 设置为<input> 标签中的计算属性name：

<input v-model="name" />

这是工作的jsfiddle