Как вызвать форму внутри компонента из магазина VueX

Question

Я вызываю действие в магазине, чтобы отправить данные в API.Этот вызов инициируется кнопкой в ​​FormComponent из @click:

<button type="button" @click="$store.dispatch('saveStoreDatas')">Click me</button>

Как я могу отправить родительскую форму кнопки (пропущенный код)?Я не могу использовать ссылку, потому что она находится внутри компонента.

Спасибо!

Answer 1

Вам нужно отправить действие и отправить форму?Обычно вы можете просто хранить данные формы в хранилище и отправлять их в действии.

Если вам действительно нужно отправить форму, отправьте событие в дочерний компонент и прослушайте событие в родительском компоненте.

Дочерний компонент будет выглядеть следующим образом.

<!-- child component template -->
<button type="button" @click="handleClick">Click me</button>

// child component script
methods: {
    handleClick () {
        this.$store.dispatch('saveStoreDatas')
        this.$emit('clickSubmit')
    }
}

И это его родитель.

<!-- parent template -->
<form ref="form">
    <child-component @clickSubmit="submitForm">
</form>

// parent component script
methods: {
    submitForm () {
        this.$refs.form.submit()
    }
}

Answer 2

Добавьте отдельную функцию для обработчика щелчков:

<button type="button" @click.prevent="submitToStore">Click me</button>
...
...
methods () {
  submitToStore () {
    // refs can be used here - get your form data and send it to the store
    let formData = this.$refs.myForm.data()
    this.$store.dispatch('saveStoreDatas', formData)
    ...
  }
  ...
}

Надеюсь, это поможет.