如何将 Vue 事件发送到状态

【问题标题】：How to emit a Vue event into state如何将 Vue 事件发送到状态
【发布时间】：2021-06-02 12:32:02
【问题描述】：

如何将组件发出的事件值直接设置为数据属性中的状态，而不是先调用一个函数，然后再设置它例如

<Input
  id="firstname"
  type="text"
  v-model="user.firstname"
  required
  p="p-2
  md:p-4"
  class="mt-2"
  errorText="First name field cannot be empty"
  :validation="user.firstname.length === 0"
  @valid="checkFirstName"
/>

但我想将直接来自 @valid 的值设置为我所在州的键

【问题讨论】：

请添加您正在使用的代码的工作 sn-p； setter 通常是处理这些事情的正确方法，也是您尝试实现的工作流程。谢谢
@AaronMorefield 好的

标签： vue.js vue-component nuxt.js vuex emit

【解决方案1】：

该值以$event 的形式出现，您可以直接将其设置为数据属性：

@valid="name = $event"

既然你的问题被标记为Vuex，也许你想调用一个突变：

@valid="$store.commit('SET_NAME', $event)"

当您可以从孩子那里做出承诺时，我认为没有充分的理由。如果问题是关于在没有突变的情况下改变 Vuex 状态，那是违规行为，不应该这样做。

这是一个演示：

Vue.component('child', {
  template: `<button @click="$emit('valid', 'myname')">click me</button>`
})

new Vue({
  el: "#app",
  data: () => ({
    name: ''
  })
});

<div id="app">
  Name: {{ name }}<br>
  <child @valid="name = $event"></child>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：