2路绑定Nuxt.js答案

【问题标题】：2 way Binding Nuxt.js2路绑定Nuxt.js
【发布时间】：2021-10-28 21:14:51
【问题描述】：

我正在尝试找到一种我可以使用的模式，它可以让我在输入时更新状态。我已经尝试了几种模式，包括官方文档中的 get set 方法，但我似乎无法得到任何工作。我可以使用 {{email}} 更改状态以显示在我的页面上，但在填写表格时不能相反。在这一点上，我会很感激任何解决方案。

<template>
  <section>
    <BaseInput placeholder="Email" type="text" :value="email" @input="updateEmail" />
  </section>
</template>

<script>
import { mapState } from 'vuex'

export default {
  components: {
    BaseInput,
  },
  computed: {
    ...mapState({
      email: (state) => state.email,
    }),
  },
  methods: {
    updateEmail(email) {
      this.$store.commit('updateEmail', email)
    },
  },
}
</script>

index.js

export const state = () => ({
  email: '',
})

export const mutations = {
  updateEmail(state, payload) {
    state.email = payload
  },
}

【问题讨论】：

你能解释更多吗？你希望你的状态用你的输入来更新，反之亦然，你的输入用你的状态填充（更新），对吗？你试过watch钩子吗？？
什么不起作用？请检查您的 vue 开发工具。

标签： data-binding nuxt.js state vuex

【解决方案1】：

如果您查找 eventListener，您将获得整个 Event 对象：https://developer.mozilla.org/en-US/docs/Web/API/Event

如果只想使用字段的值，则需要使用

this.$store.commit('updateEmail', email.target.value)

PS，需要考虑的几点：

在发布您的问题时尝试在格式方面投入更多精力
不要使用mutations，而是使用actions（Vuex 中的核心内容）
要么只使用助手（mapState、mapActions 等...），要么直接使用 Vuex（$store.state、$store.commit 等...）尽量不要混合使用两者

【讨论】：

谢谢，以后一定会更加努力。我刚刚在睡前看到了您在 Fullstack Vue 3 书中提供的相同解决方案，哈哈。我稍后会尝试，但应该可以工作，因为有几个来源给了我相同的答案。再次感谢。

【解决方案2】：

这个问题原来是由于 v-modal 不是直接在输入上，而是在自定义输入上。为了解决这个问题，我在自定义输入中创建了一个插槽，并将其包裹在常规输入周围，以显示组件中的基本输入。

【讨论】：