Сесійні властивості Livewire для збереження стану компонентів

Зберігати дані компонента між оновленнями сторінки стало легко завдяки властивостям сесії в Livewire. Це рішення автоматично зберігає стан компонента в сесії користувача, позбавляючи необхідності ручного управління сесією.

Властивості сесії в Livewire використовують просту анотацію атрибута для зберігання даних компонента. Атрибут #[Session] автоматично обробляє зберігання та отримання даних з сесії.

use Livewire\Component;
use Livewire\Attributes\Session;

class ProductFilter extends Component
{
    #[Session]
    public $category = '';

    #[Session]
    public $priceRange = [];

    public function applyFilters()
    {
        $this->dispatch('filters-updated');
    }

    public function render()
    {
        return view('livewire.product-filter');
    }
}

Атрибут #[Session] керує всіма операціями з сесією автоматично. Коли користувач застосовує фільтри і оновлює сторінку, їх вибір зберігається без додаткових налаштувань.

Процес оформлення замовлення в електронній комерції демонструє, як властивості сесії підтримують стан кошика протягом усього процесу покупок:

use Livewire\Component;
use Livewire\Attributes\Session;

class ShoppingCart extends Component
{
    #[Session]
    public $items = [];

    #[Session]
    public $shippingMethod = 'standard';

    #[Session]
    public $couponCode = '';

    public function addItem($productId, $quantity = 1)
    {
        $this->items[$productId] = [
            'quantity' => $quantity,
            'price' => Product::find($productId)->price,
        ];
    }

    public function updateShipping($method)
    {
        $this->shippingMethod = $method;
        $this->calculateTotals();
    }

    public function applyCoupon()
    {
        if ($this->validateCoupon($this->couponCode)) {
            $this->dispatch('coupon-applied');
        }
    }

    protected function calculateTotals()
    {
        return collect($this->items)->sum(fn($item) => $item['price'] * $item['quantity']);
    }

    public function render()
    {
        return view('livewire.shopping-cart', [
            'total' => $this->calculateTotals(),
        ]);
    }
}

Властивості сесії підтримують кастомні ключі для більшого контролю над організацією зберігання:

use Livewire\Component;
use Livewire\Attributes\Session;

class UserPreferences extends Component
{
    #[Session(key: 'user-theme')]
    public $theme = 'light';

    #[Session(key: 'dashboard-layout')]
    public $layout = 'grid';

    public function switchTheme()
    {
        $this->theme = $this->theme === 'light' ? 'dark' : 'light';
    }

    public function render()
    {
        return view('livewire.user-preferences');
    }
}

Динамічні ключі сесії дозволяють контекстно усвідомлене зберігання на основі властивостей компонента:

use Livewire\Component;
use Livewire\Attributes\Session;
use App\Models\Project;

class ProjectSettings extends Component
{
    public Project $project;

    #[Session(key: 'project-settings-{project.id}')]
    public $configuration = [];

    public function mount(Project $project)
    {
        $this->project = $project;
    }

    public function updateConfiguration($key, $value)
    {
        $this->configuration[$key] = $value;
    }

    public function render()
    {
        return view('livewire.project-settings');
    }
}

Цей підхід створює унікальні ключі сесії для кожного проекту, запобігаючи конфліктам конфігурації, коли користувачі працюють з кількома проектами.

Властивості сесії підтримують стан компонента під час оновлень сторінки та навігації браузером. Автоматичне збереження спрощує багатоетапні процеси, пропонуючи розробникам оптимальне рішення для управління станом.