Cara Menggunakan Kembali Logika di Vue.js Dengan Composable

Saat memprogram, penting untuk menyusun basis kode sehingga Anda dapat menggunakan kembali kode jika memungkinkan. Kode duplikat dapat membuat basis kode membengkak dan mempersulit proses debug, terutama pada aplikasi yang lebih besar.

Vue menyederhanakan penggunaan kembali kode melalui composable. Composable adalah fungsi yang merangkum logika, dan Anda dapat menggunakannya kembali di seluruh proyek Anda untuk menangani fungsi serupa.

Apakah Itu Selalu Dapat Dikomposisi?

Sebelum Vue 3 memperkenalkan composable, Anda dapat menggunakan mixin untuk mengambil kode dan menggunakannya kembali di berbagai bagian aplikasi Anda. Mixin terkandung Opsi Vue.js seperti data, metode, dan kait siklus hidup, memungkinkan penggunaan kembali kode di beberapa komponen.

Untuk membuat mixin, Anda menyusunnya dalam file terpisah dan kemudian menerapkannya ke komponen dengan menambahkan mixin ke dalamnya mixin properti dalam objek opsi komponen. Misalnya:

// formValidation.js
exportconst formValidationMixin = {
 data() {
return {
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 };
 },
 methods: {
 validateForm() {
this.formErrors = {};

if (!this.formData.username.trim()) {
this.formErrors.username = 'Username is required.';
 }

if (!this.formData.password.trim()) {
this.formErrors.password = 'Password is required.';
 }

returnObject.keys(this.formErrors).length 0;
 },
 },
};

Cuplikan kode ini menunjukkan konten mixin untuk memvalidasi formulir. Campuran ini menampung dua properti data—formulirData Dan kesalahan bentuk—awalnya disetel ke nilai kosong.

formData menyimpan data input untuk formulir, termasuk kolom nama pengguna dan kata sandi yang diinisialisasi sebagai kosong. formErrors mencerminkan struktur ini untuk menyimpan potensi pesan kesalahan, yang awalnya juga kosong.

Mixin juga berisi metode, validasiFormulir(), untuk memeriksa apakah kolom nama pengguna dan kata sandi tidak kosong. Jika salah satu kolom kosong, properti data formErrors akan terisi dengan pesan kesalahan yang sesuai.

Metodenya kembali BENAR untuk formulir yang valid, ketika formErrors kosong. Anda dapat menggunakan mixin dengan mengimpornya ke dalam komponen Vue Anda dan menambahkannya ke properti mixin pada objek Options:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="formData.username" />
<spanclass="error">{{ formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="formData.password" />
<spanclass="error">{{ formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<script>
import { formValidation } from "./formValidation.js";
export default {
 mixins: [formValidation],
 methods: {
 submitForm() {
 if (this.validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
 },
 },
};
script>
<style>
.error {
 color: red;
}
style>

Contoh ini menunjukkan komponen Vue yang ditulis menggunakan pendekatan objek Options. Itu mixin properti mencakup semua mixin yang Anda impor. Dalam hal ini, komponen menggunakan metode validasiForm dari validasi formulir mixin untuk memberi tahu pengguna apakah pengiriman formulir berhasil.

Cara Menggunakan Composable

Composable adalah file JavaScript mandiri dengan fungsi yang disesuaikan dengan permasalahan atau persyaratan tertentu. Anda dapat memanfaatkan API komposisi Vue dalam composable, menggunakan fitur seperti referensi dan referensi yang dihitung.

Akses ke API komposisi ini memungkinkan Anda membuat fungsi yang terintegrasi ke dalam berbagai komponen. Fungsi-fungsi ini mengembalikan sebuah objek, yang dapat dengan mudah Anda impor dan masukkan ke dalam komponen Vue melalui fungsi setup Composition API.

Buat file JavaScript baru di proyek Anda src direktori untuk menggunakan composable. Untuk project yang lebih besar, pertimbangkan untuk mengatur folder dalam src dan membuat file JavaScript terpisah untuk composable berbeda, untuk memastikan setiap nama composable mencerminkan tujuannya.

Di dalam file JavaScript, tentukan fungsi yang Anda perlukan. Berikut restrukturisasinya validasi formulir mixin sebagai komposisi:

// formValidation.js
import { reactive } from'vue';
exportfunctionuseFormValidation() {
const state = reactive({
 formData: {
 username: '',
 password: '',
 },
 formErrors: {
 username: '',
 password: '',
 },
 });
functionvalidateForm() {
 state.formErrors = {};
if (!state.formData.username.trim()) {
 state.formErrors.username = 'Username is required.';
 }
if (!state.formData.password.trim()) {
 state.formErrors.password = 'Password is required.';
 }
returnObject.keys(state.formErrors).length 0;
 }
return {
 state,
 validateForm,
 };
}

Cuplikan ini dimulai dengan mengimpor fungsi reaktif dari vue kemasan. Itu kemudian menciptakan fungsi yang dapat diekspor, gunakanFormValidasi().

Ini dilanjutkan dengan membuat variabel reaktif, negara, yang menampung properti formData dan formErrors. Cuplikan tersebut kemudian menangani validasi formulir dengan pendekatan yang sangat mirip dengan mixin. Terakhir, ia mengembalikan variabel status dan fungsi validasiForm sebagai objek.

Anda dapat menggunakan composable ini dengan mengimpor fungsi JavaScript dari file di komponen Anda:

<template>
<div>
<form @submit.prevent="submitForm">
<div>
<labelfor="username">Username:label>
<inputtype="text"id="username"v-model="state.formData.username" />
<spanclass="error">{{ state.formErrors.username }}span>
div>
<div>
<labelfor="password">Password:label>
<inputtype="password"id="password"v-model="state.formData.password" />
<spanclass="error">{{ state.formErrors.password }}span>
div>
<buttontype="submit">Submitbutton>
form>
div>
template>
<scriptsetup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
 if (validateForm()) {
 alert("Form submitted successfully!");
 } else {
 alert("Please correct the errors in the form.");
 }
};
script>
<style>
.error {
 color: red;
}
style>

Setelah mengimpor composable useFormValidation, kode ini merusak struktur objek JavaScript itu kembali dan melanjutkan validasi formulir. Ini memperingatkan apakah formulir yang dikirimkan berhasil atau ada kesalahan.

Composable Adalah Mixin Baru

Meskipun mixin berguna di Vue 2 untuk penggunaan kembali kode, composable telah menggantikannya di Vue 3. Composable memberikan pendekatan yang lebih terstruktur dan mudah dikelola untuk menggunakan kembali logika dalam aplikasi Vue.js, sehingga memudahkan pembuatan aplikasi web yang skalabel dengan Vue.