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

Posted 2023-02-22

【中文标题】如何绑定输入字段并同时更新 vuex 状态

【英文标题】：How to bind input field and update vuex state at same time

【发布时间】：2017-11-11 09:31:41

【问题描述】：

我来自 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>

【参考方案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

【讨论】：

如果我的表单有 4 或 10 个输入，我必须为每个输入都这样做吗？

@HelderLucas 是的。不好玩。我的方法是将它们绑定（v-model）到模板数据中的一个对象，然后将该对象发送到一个命名良好的突变并让突变改变存储。此处建议使用替代技术：ypereirareis.github.io/blog/2017/04/25/…

如果名称在对象中怎么办？

@HelderLucas，这篇博文提到了应该处理重复的 vuex-map-fields 库（包括 getter&setter 和突变）：markus.oberlehner.net/blog/…