Laravel Volt

Laravel Volt — новый пакет, анонсированный на конференции Laracon 2023. Предоставляет возможность использования однофайловых Livewire-компонентов и без проблем работает с Folio. Аналогично тому, как разработчики React и Vue могут писать однофайловые компоненты, Volt позволяет создавать компоненты в blade-шаблонах. Это позволит разработчикам создавать мощные и интерактивные компоненты, использующие как бэкенд, так и фронтенд.

Создание компонентов

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

php artisan make:volt counter

Это создаст новый файл counter.blade.php в каталоге resources/views/livewire со следующим содержимым:

<?php

use function Livewire\Volt\{state};

//

?>

<div>
    //
</div>

Добавим немного кода, чтобы заставить работать наш счётчик-компонент:

<?php

    use function Laravel\Volt\{state};
    state(['currentValue' => 0]);

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

<div> 
    <div>current Value: {{ $currentValue }}</div>
    <button class="mt-2" wire:click="increment">
        Increment
    </button>
</div>

Затем мы можем создать новую Folio-страницу для отображения нашего нового компонента:

artisan make:folio volt

Это создаст новую Folio-страницу в файле resources/views/pages/volt.blade.php. Добавим следующий код:

<x-layout>
    <div class="mt-6">
        <livewire:counter />
    <div>
</x-layout>

И запросто получили счётчик-компонент для нашего приложения.

 

Обратите внимание, что это не просто фронтендовый счётчик. Переменная $currentValue — значение, хранящееся на бэкенде. Это означает, что вы легко можете обмениваться данными между фронтендом и бэкендом ?

Volt State

Как вы видите выше, Volt предоставляет нам возможность легко управлять состоянием с помощью объявления use function Laravel\Volt\{state};

После объявления {state} у нас есть доступ к хелперу state, который мы можем использовать для установки состояния любых переменных:

<?php

    use function Laravel\Volt\{state};
    state(['currentValue' => 0]);

?>

Теперь у нас есть доступ к переменной $currentValue внутри шаблона, и благодаря мощи Livewire и AlpineJS мы можем отслеживать состояние любых переменных на фронтенде и бэкенде.

Volt Provide

Мы также можем предоставить нашему шаблону некоторые данные, но если мы не хотим специально делиться состоянием данных между фронтендом и бэкендом, то для этого мы можем воспользоваться объявлением {provide}:

<?php
    use App\Models\Todo;
    use function Laravel\Volt\{provide};

    provide (fn () => [
        'todos' => Todo:: all (),
    ]);
?>
<div>
    @foreach($todos as $todo)
        <!-- output the $todo data -->
    @endforeach
</div>

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

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

<?php
    use App\Models\Todo;
    use function Laravel\Volt\{provide, state};
    
    state(['title' => '']);
    
    provide(fn () => [
        'todos' => Todo:: all (),
    ]);
?>

Теперь наш шаблон будет иметь все данные $todos, и мы будем обмениваться состоянием переменной с именем $title.

Volt Functions

Задание функций для использования в Volt-компонентах очень простое. Вот как например мы можем создать функцию для добавления нового элемента todo в нашу базу данных:

<?php
    use App\Models\Todo;
    use function Laravel\Volt\{provide, state};
    
    state(['title' => '']);
    
    provide(fn () => [
        'todos' => Todo:: all (),
    ]);

    $add = function () {
        Todo:: create([
            'title' => $this-›title,
        ]);

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

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

В приведенном выше коде, при отправке формы будет вызван метод $add, который создаст новую todo в базе данных и очистит заголовок. Очень круто ?

Volt Правила Валидации

Вы также можете легко добавить валидацию в Volt-компоненты. Например проверим, чтобы переменная $title не была пустой и содержала как минимум три символа.

<?php
    use App\Models\Todo;
    use function Laravel\Volt\{provide, rules, state};
    
    state(['title' => '']);

    rules(['title' => 'required|min:3']);
    
    provide(fn () => [
        'todos' => Todo:: all (),
    ]);

    $add = function () {
        Todo:: create([
            'title' => $this-›title,
        ]);

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

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

Как вы видите, мы добавили {rules}, которое дает нам доступ к хелперу rules(), позволяющему добавлять валидацию для любого состояния в Volt-компоненте.

Заключение

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

Volt поможет нам создавать динамические и интерактивные пользовательские интерфейсы без необходимости использования множества отдельных файлов. Он обеспечивает компактность кода, объединяя поведение и разметку в одном файле для улучшения производительности. Крутейшая штука ⚡️

Автор: Tony Lea
Перевод: Алексей Широков