Vue3+Vuex表单异常：勾选复选框后部分输入框值清空

根据你描述的现象，核心矛盾是输入框显示值与Vuex Store值不一致，且仅特定字段受影响，大概率是响应式绑定或组件渲染逻辑出了问题，常见原因如下：

• 未预先声明响应式属性
  Vue3（包括Vuex的state）的响应式系统依赖初始声明的属性追踪变化。如果你的state.form初始只定义了prenom和email，nom、phone、postalCode是后续通过mutation动态添加的，那组件模板里的v-model="form.nom"会在组件实例上创建本地属性，而非绑定到Vuex的state。当切换复选框触发组件重渲染时，本地属性会被重置为空，但Vuex中实际的字段值并未改变，就会出现输入框清空但Store值正常的情况。

• 表单绑定丢失响应式
  如果组件里是通过普通解构获取表单字段（比如const { nom } = store.state.form），而非用computed属性或mapState辅助函数，这些变量会失去响应式绑定。当Store值变化时组件无法同步更新，反之，切换复选框时若触发了本地变量的重置，就会导致输入框显示异常。

• onInputChange函数存在逻辑漏洞
  共用的输入处理函数如果在判断字段类型或处理payload时出错，可能在处理复选框时误操作其他字段。比如：处理复选框时错误地把文本框字段的value设为空，或者commit时传了错误的字段名——不过这种情况概率较低，毕竟你说Store里的值没变化。

• 组件key值触发的重新渲染异常
  如果表单组件的key绑定了termsAndConditions的值，切换复选框时key会变化，触发组件重新创建。要是组件初始化时没正确从Store同步nom等字段的值，就会显示为空，但Store里的值仍保持不变。

内容的提问来源于stack exchange，提问作者Philippe Vermeulen