Nuxt.js中表单输入无法更新Vuex State的双向绑定问题求解

可行解决方案 #

你的Vuex配置（state、mutations）本身没有问题，问题核心大概率是自定义BaseInput组件的@input事件传递参数不符合预期：多数封装输入组件默认透传原生input事件对象，而非直接返回输入字符串，导致你提交到Vuex的是事件对象而非实际输入值，才会出现更新失效的问题。

下面提供两种可直接落地的实现方案：

方案1：修复现有写法的事件取值逻辑

如果你的BaseInput触发的是原生input事件，只需修改updateEmail的取值逻辑即可：

methods: {
  updateEmail(e) {
    // 从事件对象中取实际输入值
    this.$store.commit('updateEmail', e.target.value)
  }
}

方案2：推荐使用计算属性get/set模式（更简洁）

这种模式可以直接用v-model绑定，无需单独写@input监听方法，代码更符合Vue的使用习惯：

<template>
  <section>
    <BaseInput placeholder="Email" type="text" v-model="email" />
  </section>
</template>

<script>
import { BaseInput } from './你的组件路径'

export default {
  components: {
    BaseInput
  },
  computed: {
    email: {
      // 取值时从Vuex取
      get() {
        return this.$store.state.email
      },
      // 赋值时提交mutation到Vuex
      set(inputValue) {
        this.$store.commit('updateEmail', inputValue)
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Guillermo Medel