Laravel Volt

Laravel Volt

Laravel Volt — це новий пакет, який був анонсований під час Laracon 2023. Volt привносить в Laravel потужність однофайлових компонентів Livewire , і він бездоганно працює з Folio. Подібно до того, як розробники React і Vue можуть писати однофайлові компоненти, Laravel Volt додає однофайлові компоненти до шаблонів блейдів. Це дозволить розробникам створювати потужні та інтерактивні компоненти, які використовують back-end та front-end.

Створення компонентів

Ви можете легко створити новий компонент Volt, виконавши команду:

php artisan make:volt counter

Це створить новий файл у resources/views/livewire каталозі під назвою counter.blade.php, з таким вмістом:

<?php

використовувати функцію Livewire\Volt\{state};

//

?>

<div>
    //
</div>

Ми можемо додати трохи коду, щоб наш компонент лічильника працював:

<?php

використовувати функцію Laravel\Volt\{state};
    state(['currentValue' => 0]);

$increment = fn () => $this->currentValue++;
?>

<div> 
    <div>current Значення: {{ $currentValue }}</div>
    <button class="MT-2" wire:click="increment">
        Приріст
    </кнопку>
</div>

Далі ми можемо створити нову сторінку фоліо для рендерингу нашого нового компонента:artisan make:

folio volt

Це створить нову сторінку фоліо, розташовану за адресою resources/views/pages/volt.blade.php. Ми можемо додати наступний код:

<x-layout>
    <div class="mt-6">
        <livewire:лічильник />
    <div>
</x-макет>

І, так само просто, у нашому додатку є простий компонент лічильника.

Notice that this is not just a front-end counter. The variable $currentValue is a value stored in the back-end. This means that you can easily share data between your front-end and back-end with ease 🎉

Стан

Вольта Як ви можете бачити вище, Volt дає нам можливість легко керувати станом за допомогою use function Laravel\Volt\{state}; оголошення.

Після визначення {state} оголошення у нас з'явився доступ до допоміжного методу state , який ми можемо використовувати для встановлення стану для будь-якої з наших змінних:

<?php

використовувати функцію Laravel\Volt\{state};
    state(['currentValue' => 0]);

?>

Тепер у нас буде доступ до змінної $currentValue всередині шаблону, і завдяки потужності Livewire і AlpineJS ми зможемо відстежувати стан будь-яких змінних на фронтенді та бекенді.

Volt Provide

Ми також можемо захотіти надати нашому шаблону деякі дані, однак ми не хочемо спеціально ділитися станом даних між інтерфейсом і бекендом. Для цього ми можемо скористатися декларацією {provide} :

<?php
    використовувати App\Models\Todo;
    використовувати функцію Laravel\Volt\{provide};

забезпечити (fn () => [
        'todos' => Завдання:: all (),
    ]);
?>
<div>
    @foreach($todos як $todo)
        <!-- вивести дані $todo -->
    @endforeach
</div>

Тепер, всередині нашого шаблону, ми зможемо отримати доступ до змінної $todos , яка міститиме колекцію завдань, які ми отримали з бази даних.

Ви можете використовувати { provide } і {state} в одному компоненті, що можна легко зробити за допомогою наступного коду:

<?php
    використовувати App\Models\Todo;
    використовувати функцію Laravel\Volt\{provide, state};
    
state(['title' => '']);
    
provide(fn () => [
        'todos' => Завдання:: all (),
    ]);
?>

Тепер наш шаблон матиме всі $todos доступні дані, і ми поділимося станом зі змінною під назвою $title.

Функції Volt Визначити

функції, які будуть використовуватися у ваших компонентах Volt, дуже просто. Ось приклад того, як ми можемо створити функцію для додавання нового елемента завдання до нашої бази даних:

<?php
    використовувати App\Models\Todo;
    використовувати функцію Laravel\Volt\{provide, state};
    
state(['title' => '']);
    
provide(fn () => [
        'todos' => Завдання:: all (),
    ]);

$add = function () {
        Завдання:: create([
            'title' => $this-›title,
        ]);

$this->title = ":
    };
?>

<div> 
    <form wire:submit.prevent="add"> 
        <input name="title" wire:model="title" />
        <button type="submit">Add Todo</button>
    </форма>
</div>

У наведеному вище коді, коли форму буде надіслано, вона викличе $add метод і створить нове завдання в базі даних і очистить заголовок. Досить круті 😎

правила

перевірки Volt Ви також можете дуже легко додати валідацію до своїх компонентів Volt. Ось приклад того, як ми можемо перевірити, що змінна $title не порожня і містить принаймні три символи.

<?php
    використовувати App\Models\Todo;
    використовувати функцію Laravel\Volt\{provision, rules, state};
    
state(['title' => '']);

rules(['title' => 'required|min:3']);
    
provide(fn () => [
        'todos' => Завдання:: all (),
    ]);

$add = function () {
        Завдання:: create([
            'title' => $this-›title,
        ]);

$this->title = ":
    };
?>

<div> 
    <form wire:submit.prevent="add"> 
        <input name="title" wire:model="title" />
        <button type="submit">Add Todo</button>
    </форма>
    @error ('назва')
        <span class="text-red-500">{{ $message }}</span>
    @enderror
</div>

Ви побачите, що вище ми додали нове оголошення {rules} , яке дає нам доступ до допоміжного методу, rules() що дозволяє нам додавати перевірку до будь-якого стану в нашому компоненті volt.

Висновок

Обов'язково дізнайтеся більше про встановлення та додатковий функціонал, ознайомившись із документацією Volt на https://livewire.laravel.com/docs/volt.

Volt допоможе нам створювати динамічні та інтерактивні інтерфейси користувача без необхідності використання окремих файлів. Volt дає нам колокацію коду, об'єднуючи поведінку та розмітку компонентів в одному файлі для підвищення продуктивності. Електризація речей ⚡️