DEV.RULES
Digital agency
123
Livewire

Livewire 2.x - меняем состояние URL

От Святослав Торн, публикация от 12 September, 2020

На этой недели произошло интереснейшее событие для любителей экосистемы Laravel. Релиз Laravel 8, а вместе с ним вышло несколько еще несколько интересных релизов! 

Я хочу рассказать о новой версии Livewire 2.x - появилось много отличных апдейтов, сижу играюсь и хотел бы рассказать о некоторых из них. 

Раньше работая с первой версие Livewire чтобы изменить URL строку состояния мы делали лишние манипуляции из бэкэнда, постоянно обнуляя наш компонент вручную. 

Но концепция livewire заключается в том чтобы сводить к минимуму такие манипуляции. Тут приходит новое protected свойство $queryString которое отвечает за состояние компонента. 

На самом деле все просто, как обычно объявляем наши свойства и закидываем их в массив $queryString, а далее происходит магия, Livewire следит за изменениями наших свойств и меняет URL строку состояния, а значит мы можем легко вернуться на один или несколько шагов назад, не обнуляя весь компонент. Просто супер, теперь можно сосредоточиться на главном! 

Давайте я приведу простой пример, он не из документации, это просто моя мелкая фантазия для проверки - как же оно работает😊 

У вас наверное уже установлена Laravel, и Livewire соответсвенно, если нет то выполните шаги из этой инструкции Клик!.  

И так, продолжим: 

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

php artisan make:livewire RandomString

Подключение компонента во вью

dashboard.blade.php 
<livewire:random-string> 

Вью компонента

Добавим кнопку и отображение нашей случайной строки для наглядности:

<div class="flex flex-col items-center justify-center h-full p-10 bg-white">
    <div class="font-thin text-gray-500 text-2xl">Случайная строка: {{ $randomString }}</div>
    <button class="mt-5 bg-red-200 border border-red-500 shadow px-5 py-2 text-gray-400" 
        wire:click="updateQuery()">QueryString Change</button>
</div>

Настройка компонента 

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $randomString = '';

    // Вариант 1 (даже если пусто будет показано ?randomString=)
    // protected $queryString = ['randomString'];
    
    // Вариант 2 (если строка пуста в URL не будет ничего лишнего)
    protected $queryString = [
        'randomString' => ['except' => '']
    ];

    public function updateQuery() : void 
    {
        $this->randomString = \Str::random(10);
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Готово, проверяем)))