Метод dehydrate

Метод dehydrate вызывается в жизненном цикле Livewire непосредственно перед тем, как состояние компонента будет сериализовано и отправлено на клиентскую сторону. Это последняя возможность изменить публичные свойства компонента перед их передачей. Метод выполняется после рендеринга, но до того, как данные будут закодированы в JSON. В качестве параметра метод принимает объект $propertyBag, который представляет собой коллекцию свойств, подготовленных к сериализации.

Основное назначение dehydrate - выполнение финальных преобразований данных, которые должны быть видны на клиенте. Например, вы можете отфильтровать чувствительные данные, преобразовать форматы или подготовить вычисляемые поля для отображения в JavaScript.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ExampleComponent extends Component
	{
		public $property;
		
		public function dehydrate($propertyBag)
		{
			// Модификация данных перед отправкой
		}
		
		public function render()
		{
			return view('livewire.example');
		}
	}
?>

Пример

Давайте преобразуем строку в верхний регистр перед отправкой на клиент:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextTransformer extends Component
	{
		public $text = 'hello world';
		
		public function dehydrate($propertyBag)
		{
			$this->text = strtoupper($this->text);
		}
		
		public function render()
		{
			return view('livewire.text-transformer');
		}
	}
?>

<div>
	<span>{{ $text }}</span>
	<button wire:click="$refresh">Обновить</button>
</div>

В результате при первом рендеринге и при каждом обновлении текст будет отображаться в верхнем регистре:

<span>HELLO WORLD</span>
<button>Обновить</button>

Пример

Рассмотрим фильтрацию массива данных перед отправкой на клиент:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataFilter extends Component
	{
		public $items = [1, 2, 3, 4, 5];
		
		public function dehydrate($propertyBag)
		{
			$this->items = array_filter($this->items, function($value) {
				return $value > 2;
			});
		}
		
		public function render()
		{
			return view('livewire.data-filter');
		}
	}
?>

<div>
	@foreach ($items as $item)
		<span>{{ $item }}</span>
	@endforeach
	<button wire:click="$refresh">Обновить</button>
</div>

Результат выполнения кода:

<span>3</span>
<span>4</span>
<span>5</span>
<button>Обновить</button>

Пример

Используем $propertyBag для модификации конкретного свойства:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PropertyModifier extends Component
	{
		public $user = 'john_doe';
		public $status = 'active';
		
		public function dehydrate($propertyBag)
		{
			$propertyBag->user = strtoupper($this->user);
			$propertyBag->status = 'processed';
		}
		
		public function render()
		{
			return view('livewire.property-modifier');
		}
	}
?>

<div>
	<p>User: {{ $user }}</p>
	<p>Status: {{ $status }}</p>
	<button wire:click="$refresh">Обновить</button>
</div>

Результат выполнения кода:

<p>User: JOHN_DOE</p>
<p>Status: processed</p>
<button>Обновить</button>

Смотрите также

метод hydrate,
который вызывается после гидратации данных с клиента
метод mount,
который выполняется при инициализации компонента
метод rendered,
который вызывается после рендеринга шаблона
жизненный цикл dehydrate-prop,
который управляет дегидратацией отдельных свойств