如何将 Vue 事件发送到状态

Question

如何设置从组件发出的事件值直接到数据中的状态属性而不是先调用函数然后设置它例如

<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 的值设置为我所在州的一个键

Answer 1

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

@valid="name = $event"

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

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

当您可以从 child 提交时，我没有看到一个很好的理由。如果问题是关于在没有突变的情况下改变 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>

如何将 Vue 事件发送到状态

How to emit a Vue event into state

emit

vue.js

vue-component

vuex

nuxt.js