如何绑定输入字段并同时更新 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

并在您的 <input> 标签中将 v-model 设置为计算得出的属性 name :

<input v-model="name" />

这是工作jsfiddle

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

How to bind input field and update vuex state at same time

vue.js

vuejs2

vuex