【Alpine.js】Livewireのプロパティと連携させるなら@entangle使いまヒョ

＠entangleとは

LivewireとAlpine.jsのプロパティを共有することができます。

何ができるのか

Alpine.js、Livewireのプロパティの値を変更させると、もう一方のプロパティの値も変更されます。
プログラミング言語で言い表せば、PHPとJavaScriptを相互に連携させることができるというワケ。

コード例（公式ドキュメントより）

// Livewireのコンポーネント

class Dropdown extends Component
{
    public $showDropdown = false;

    public function archive()
    {
        ...
        $this->showDropdown = false;
    }

    public function delete()
    {
        ...
        $this->showDropdown = false;
    }
}

@entangleでLivewireのshowDropdownプロパティをopenプロパティに代入している
                        ↓
<div x-data="{ open: @entangle('showDropdown') }">
    <button @click="open = true">Show More...</button>

    <ul x-show="open" @click.away="open = false">
        <li><button wire:click="archive">Archive</button></li>
        <li><button wire:click="delete">Delete</button></li>
    </ul>
</div>

この時、Archiveボタンをクリックすれば、Alpine.jsのopenプロパティの中身も連動して値がtrueになります。

ここ大事かもポイント

Alpine.js側からプロパティを変化させるたびにLivewireからリクエストが送信される

Alpine.jsはフロントの画面操作に使うことが多いと思います。
ゆえに、プロパティの変化もLivewireのプロパティと比べて比較的多くなります。
Alpine.jsとLivewireと連携しているということは

Alpine.jsのプロパティ更新の回数
＝　Livewireのプロパティ更新の回数
＝　Livewireのリクエスト送信回数

になるはずです。おそらく。
Livewireのリクエスト回数が多くなれば当然、動作がウンコになりますのでこれを防ぐ方法だけ紹介しておきます。

解決方法
Livewire使用者おなじみ、.defer

<div x-data="{ open: @entangle('showDropdown').defer }">

これでAlpine.jsの変更ごとにLivewireを更新されることはなくなります。

まとめ

これこそLivewireとAlpine.jsを共に使うメリットやと思います。
バチコリと活用してって開発効率ブチアゲていきましょう。

Livewireと共にあらんことを