Атрибут #[Isolate]

Атрибут #[Isolate] в Livewire предназначен для маркировки свойств компонента, которые должны быть исключены из процесса синхронизации состояния между сервером и клиентом. Это полезно, когда свойство используется только на сервере для внутренних вычислений и не должно передаваться на фронтенд или обновляться через сетевые запросы. Атрибут применяется к публичным свойствам класса компонента и не принимает параметров.

Синтаксис

<?php
	use Livewire\Attributes\Isolate;
	use Livewire\Component;

	class ExampleComponent extends Component
	{
		#[Isolate]
		public $serverOnlyProperty;

		public function render()
		{
			return view('livewire.example');
		}
	}
?>

Пример

Давайте создадим компонент, в котором одно свойство будет изолировано, а другое - обычное. При обновлении через wire:click изолированное свойство не будет синхронизироваться с клиентом:

<?php
	namespace App\Livewire;

	use Livewire\Attributes\Isolate;
	use Livewire\Component;

	class IsolateDemo extends Component
	{
		public $normalProperty = 0;
		
		#[Isolate]
		public $isolatedProperty = 0;

		public function incrementBoth()
		{
			$this->normalProperty++;
			$this->isolatedProperty++;
		}

		public function render()
		{
			return view('livewire.isolate-demo');
		}
	}
?>

<div>
	<p>Normal: {{ $normalProperty }}</p>
	<p>Isolated: {{ $isolatedProperty }}</p>
	<button wire:click="incrementBoth">Increment Both</button>
</div>

После первого клика на кнопку оба свойства увеличатся на 1, но при последующих обновлениях изолированное свойство останется на сервере без синхронизации с клиентом:

<div>
	<p>Normal: 1</p>
	<p>Isolated: 0</p>
	<button>Increment Both</button>
</div>

Пример

Используем #[Isolate] для хранения временных данных, которые не должны влиять на состояние интерфейса:

<?php
	namespace App\Livewire;

	use Livewire\Attributes\Isolate;
	use Livewire\Component;

	class TempData extends Component
	{
		#[Isolate]
		public $tempCounter = 0;

		public function incrementTemp()
		{
			$this->tempCounter++;
		}

		public function render()
		{
			return view('livewire.temp-data');
		}
	}
?>

<div>
	<button wire:click="incrementTemp">Increment Temp</button>
	<p>Temp: {{ $tempCounter }}</p>
</div>

При клике на кнопку значение $tempCounter увеличится на сервере, но не обновится на клиенте, так как свойство изолировано:

<div>
	<button>Increment Temp</button>
	<p>Temp: 0</p>
</div>

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

атрибут #[Reactive],
который делает свойство реактивным для обновлений
атрибут #[Locked],
который блокирует изменение свойства
атрибут #[Url],
который синхронизирует свойство с URL-параметрами
атрибут #[Session],
который сохраняет свойство в сессии