Vue.js Vuex和使用v-model的表单处理

我遵循vuex表单处理的官方vuex教程：。我基本上是在底部复制粘贴了他们建议的双向计算属性的实现，但我还是收到一个错误，说它无法读取未定义的属性“name”：

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

found in

---> <CustomForm> at src/components/Form.vue
       <Register> at src/views/Register.vue
         <App> at src/App.vue
           <Root>

---

在get函数的return语句之前，我尝试了

console.log（this.$store.state.form.name）

，但是没有打印出任何内容，因此如果您希望有一个可以更新

state.form

对象上任何值的变异，那么我会这样做

在变异中，使用键将值指定给right属性

突变：{
updateForm（状态，{key，value}）{
state.form[键]=值；
}
}

在提交中，使用一个对象作为有效负载，该有效负载具有一个键和值参数

计算：{
姓名：{
得到（）{
返回此项。$store.state.form.name
},
设置（值）{
这个.$store.commit（'updateForm'，{key:'name'，value}）；
}
}

如果您希望有一个可以更新

state.form

对象上任何值的突变，那么我会这样做

在变异中，使用键将值指定给right属性

突变：{
updateForm（状态，{key，value}）{
state.form[键]=值；
}
}

在提交中，使用一个对象作为有效负载，该有效负载具有一个键和值参数

计算：{
姓名：{
得到（）{
返回此项。$store.state.form.name
},
设置（值）{
这个.$store.commit（'updateForm'，{key:'name'，value}）；
}
}

将此添加到您的代码中 从“vuex映射字段”导入{updateField}

There is no need to add mutations to update the state this this done directly and using v-model you can bind these properties.

将此添加到您的代码中 从“vuex映射字段”导入{updateField}

There is no need to add mutations to update the state this this done directly and using v-model you can bind these properties.

---

我的变异如下：

updateForm:（state，key，value）=>（{…state.form，[key]：value}）

。我想让它对每个输入字段都可重用，但我不确定它是否有效，这一点很好！但这与我的问题无关，我可以在Form.vue中注释掉set函数，但仍然会得到相同的错误。不幸的是，你不能这样做，你只能传递一个有效负载参数。请参阅答案（第二部分）有关如何在有效负载中使用多个参数的信息。感谢您提供的信息，我将使用您建议的方法！更新后的答案仅包括答案的相关部分我的变异如下：

updateForm:（state，key，value）=>（{…state.form，[key]：value}）

。我想让它对每个输入字段都可重用，但我不确定它是否有效，这一点很好！但这与我的问题无关，我可以在Form.vue中注释掉set函数，但仍然会得到相同的错误。不幸的是，你不能这样做，你只能传递一个有效负载参数。请参阅答案（第二部分）关于如何在有效负载中使用多个参数。感谢您提供的信息，我将使用您建议的方法！更新的答案仅包括答案的相关部分

    You can use mapFields to enable to way data binding
      computed: {
        ...mapFields({
          firstName: 'form.name',
          lastName: 'form.lastName',
          phoneNumber: 'form.phoneNumber',
          emailAddress: 'form.emailAddress'
        }),
      },

There is no need to add mutations to update the state this this done directly and using v-model you can bind these properties.