vue.js - 如何绑定(bind)输入字段并同时更新 vuex 状态

Question

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

简化:

Vuex 状态

name: "Foo bar"

Vuex Action

addName

我可以毫无问题地更改状态，但我需要绑定(bind)一个输入字段，并且在更改时更新状态。将此视为更新表单，其中已预先填写用户详细信息并且他们可以更改自己的姓名。

<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