Ларавель Вольт

Tony Lea

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

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

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

volt counter

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

<?php

использовать функцию Livewire\Volt\{state};

//

?>

<div>
    //
</дел>

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

<?php

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

$increment = fn() => $this->текущееЗначение++;
?>

<div> 
    <div>текущее значение: {{ $currentValue }}</div>
    <button class="mt-2" wire:click="increment">
        Приращение
    </кнопка>
</дел>

Далее мы можем создать новую страницу фолио для рендеринга нашего нового компонента: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 Как вы можете видеть выше, 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' => Todo:: все (),
    ]);
?>
<div>
    @foreach($todos как $todo)
        <!-- выведите данные $todo -->
    @endforeach
</дел>

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

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

<?php
    используйте App\Models\Todo;
    использовать функцию Laravel\Volt\{provide, state};
    
state(['title' => '']);
    
provide(fn () => [
        'todos' => Todo:: все (),
    ]);
?>

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

Функции

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

<?php
    используйте App\Models\Todo;
    использовать функцию Laravel\Volt\{provide, state};
    
state(['title' => '']);
    
provide(fn () => [
        'todos' => Todo:: все (),
    ]);

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

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

<div> 
    <form wire:submit.prevent="add"> 
        <input name="title" wire:model="title" />
        <button type="submit">Добавить задачу</button>
    </форма>
</дел>

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

правила проверки Volt Вы

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

<?php
    используйте App\Models\Todo;
    использовать функцию Laravel\Volt\{обеспечивать, правила, состояние};
    
state(['title' => '']);

rules(['title' => 'обязательный|min:3']);
    
provide(fn () => [
        'todos' => Todo:: все (),
    ]);

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

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

<div> 
    <form wire:submit.prevent="add"> 
        <input name="title" wire:model="title" />
        <button type="submit">Добавить задачу</button>
    </форма>
    @error ('заголовок')
        <span class="text-red-500">{{ $message }}</span>
    @enderror
</дел>

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

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

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