Несколько форм с одним методом submit () от Vue

Question

У меня есть несколько форм.У каждого из них одинаковая логика (проверка, отправка ...), поэтому я хочу создать один метод для управления действиями в моих формах.На данный момент мой код является избыточным, потому что у меня одинаковые методы onSubmit() для каждого .vue файла.

мой HTML:

<div id="app">
    <myform-one></myform-one>
    <myform-two></myform-two>
</div>

мой JavaScript ( main.js - входной файл в веб-пакете):

import Vue from 'vue';
import Myform1 from './myform1.vue';
import Myform2 from './myform2.vue';

new Vue({
    el: '#app',
    components: {
        myformOne: Myform1,
        myformTwo: Myform2
    }
});

и файлы компонентов VUE:

myform1.vue :

<template>
    <div>
        <form @submit.prevent="onSubmit">
            <input type="text" v-model="fields.fname11" />
            <input type="text" v-model="fields.fname12" />
            <button type="submit">submit</button>
        </form>
    </div>
</template>

<script>
    let formfields = {
        fname11: '',
        fname12: ''
    };

    export default {
        data() {
            return {
                fields: formfields
            }
        },

        methods: {
            onSubmit() {
                // code responsible for reading, validating and sending data here
                // ...
                console.log(this.fields);
            }
        },
    }
</script>

и myform2.vue :

<template>
    <div>
        <form @submit.prevent="onSubmit">
            <input type="text" v-model="fields.fname21" />
            <input type="text" v-model="fields.fname22" />
            <input type="text" v-model="fields.fname23" />
            <button type="submit">submit</button>
        </form>
    </div>
</template>

<script>
    let formfields = {
        fname21: '',
        fname22: '',
        fname23: '',
    };

    export default {
        data() {
            return {
                fields: formfields
            }
        },

        methods: {
            onSubmit() {
                // code responsible for reading, validating and sending data here
                // ...
                console.log(this.fields);
            }
        },
    }
</script>

Как создать и использовать один общий метод submitForm()?И где его код должен быть (хорошая практика)?

Answer 1

Создайте отдельный файл, который содержит логику:

// submitForm.js
export default function (fields) {
   // code responsible for reading, validating and sending data here
   // ...
}

Затем используйте эту логику внутри компонентов

import submitForm from "../services/submitForm.js"
...
methods: {
  onSubmit() {
    submitForm(this.fields)
  }
}

Answer 2

Есть несколько вариантов.Мой любимый это создание mixin vue docs mixins

export const form_functionality = {
  methods: {
     on_submit() {
      //logic of submit
     },
     //here we can have other reusable methods
  }
}

Затем в ваших компонентах используйте этот mixin следующим образом:

import { form_functionality } from 'path_of_mixin'
export default {
  mixins: [form_functionality]
}

В конце концов,то, что имеет mixins (создано, методы, данные и т. д.), будет объединено с компонентом, который использует этот mixin.

Таким образом, практически вы можете получить доступ к методу mixin, например this.on_submit()