Laravel Volt

Laravel Volt

Laravel Volt to nowy pakiet, który został ogłoszony podczas Laracon 2023. Volt przenosi moc pojedynczych komponentów Livewire do Laravel i bezproblemowo współpracuje z Folio. Podobnie jak programiści React i Vue mogą pisać komponenty jednoplikowe, Laravel Volt wprowadza komponenty jednoplikowe do szablonów kaset. Umożliwi to programistom tworzenie potężnych i interaktywnych komponentów, które wykorzystują back-end i front-end.

Tworzenie komponentów

Możesz łatwo utworzyć nowy komponent Volt, uruchamiając:php artisan make:

volt counter

Spowoduje to utworzenie nowego pliku w resources/views/livewire katalogu o nazwie , o counter.blade.phpnastępującej zawartości:

<?php

użyj funkcji Livewire\Volt\{state};

//

?>

<div>
    //
</div>

Możemy dodać trochę kodu, aby nasz komponent licznika działał

: <?php

użyj funkcji Laravel\Volt\{state};
    state(['currentValue' => 0]);

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

<div> 
    <div>current Wartość: {{ $currentValue }}</div>
    <button class="mt-2" wire:click="increment">
        Wzrost
    </przycisk>
</div>

Następnie możemy utworzyć nową stronę folio, aby renderować nasz nowy komponent:artisan make:

folio volt

Spowoduje to wygenerowanie nowej strony folio znajdującej się pod adresem resources/views/pages/volt.blade.php. Możemy dodać następujący kod:

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

I tak proste, jak to, że mamy prosty komponent licznika w naszej aplikacji.

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 🎉

Stan

wolta Jak widać z góry, Volt daje nam możliwość łatwego zarządzania stanem za pomocą use function Laravel\Volt\{state}; deklaracji.

Po zdefiniowaniu {state} deklaracji mamy teraz dostęp do metody helper, której możemy użyć do state ustawienia stanu dla dowolnej z naszych zmiennych:

<?php

użyj funkcji Laravel\Volt\{state};
    state(['currentValue' => 0]);

?>

Teraz będziemy mieli dostęp do zmiennej $currentValue wewnątrz szablonu, a dzięki mocy Livewire i AlpineJS możemy śledzić stan dowolnych zmiennych na front-endzie i back-endzie.

Volt Provide

Możemy również chcieć dostarczyć naszemu szablonowi pewne dane; jednak nie chcemy specjalnie udostępniać stanu danych między front-endem a back-endem. Aby to zrobić, możemy skorzystać z deklaracji

 {provide}:<?php
    użyj App\Models\Todo;
    użyj funkcji Laravel\Volt\{provide};

podaj (fn () => [
        'todos' => Todo:: all (),
    ]);
?>
<div>
    @foreach($todos jak $todo)
        <!-- wyprowadzać dane $todo -->
    @endforeach
</div>

Teraz wewnątrz naszego szablonu będziemy mogli uzyskać dostęp do zmiennej $todos, która będzie zawierać kolekcję Todo, które pobraliśmy z bazy danych.

Możesz użyć {provide} i {state} w tym samym komponencie, co można łatwo osiągnąć za pomocą następującego kodu:

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

Teraz nasz szablon będzie zawierał $todos wszystkie dostępne dane i udostępnimy stan zmiennej o nazwie $title.

Funkcje

Volt Definiowanie funkcji, które mają być używane w komponentach Volt, jest bardzo proste. Oto przykład, w jaki sposób możemy utworzyć funkcję, aby dodać nowy element do zrobienia do naszej bazy danych:

<?php
    użyj App\Models\Todo;
    użyj funkcji 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">Dodaj do zrobienia</button>
    </formularz>
</div>

W powyższym kodzie, gdy formularz zostanie przesłany, wywoła $add metodę i utworzy nowe todo w bazie danych i wyczyści tytuł. Całkiem fajne 😎

zasady

walidacji Volt Możesz również bardzo łatwo dodać walidację do swoich komponentów Volt. Oto przykład sprawdzenia, czy zmienna $title nie jest pusta i zawiera co najmniej trzy znaki.

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

rules(['title' => 'wymagane|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">Dodaj do zrobienia</button>
    </formularz>
    @error ("tytuł")
        <span class="text-red-500">{{ $message }}</span>
    @enderror
</div>

Zobaczysz, że powyżej dodaliśmy nową deklarację {rules}, która daje nam dostęp do metody pomocniczejrules(), co pozwala nam dodać walidację do dowolnego stanu w naszym komponencie wolta.

Wniosek

: Dowiedz się więcej o instalacji i dodatkowych funkcjach, zapoznając się z dokumentacją Volta na stronie https://livewire.laravel.com/docs/volt.

Volt pomoże nam zbudować dynamiczne i interaktywne interfejsy użytkownika bez potrzeby stosowania oddzielnych plików. Volt zapewnia nam kolokację kodu, łącząc zachowanie i znaczniki komponentów w jednym pliku w celu zwiększenia wydajności. Elektryzujące rzeczy ⚡️