前面三篇關於 AlpineJs 的文章都是在控制前端的頁面而跟 Livewire 比較無關，那今天就來把 Livewire 也套進 AlpineJS 吧！！

透過 $wire 來從 AlpineJS 取用 Livewire 的資料

在 Livewire 中的任何 Alpine 元件都可以透過魔術方法 $wire 來取得及操作 Livewire 元件。

Livewire 元件

class Counter extends Component
{
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
}

Livewire Blade

透過 $wire.count 可以取得 Livewire 中的 $count，而在 @click 也能透過 $wire.increment() 直接呼叫 Livewire 中的函式。

<div>
    <!-- Alpine Counter Component -->
    <div x-data>
        <h1 x-text="$wire.count"></h1>
 
        <button @click="$wire.increment()">Increment</button>
    </div>
</div>

完整的 API 列表

// 存取 Livewire 的屬性
$wire.foo
 
// 呼叫 Livewire 的函式
$wire.someMethod(someParam)
 
// 呼叫 Livewire 的函式，並在執行完成後才執行 `.then()` ，可以參考 JavaSrcipt Promise 。
$wire.someMethod(someParam)
    .then(result => { ... })
 
// 呼叫 Livewire 的函式，並使用 async/await ，可以參考 JavaSrcipt async/await 。
let foo = await $wire.getFoo()
 
// emit Livewire 事件
$wire.emit('some-event', 'foo', 'bar')
 
// 用來接收 Livewire 的 emit 事件
$wire.on('some-event', (foo, bar) => {})
 
// 取得屬性
$wire.get('property')
 
// 設置屬性
$wire.set('property', value)
 
// 延遲設置屬性，在下一次與後端資料來回時才一併觸發
$wire.set('property', value, true)
 
// 呼叫 Livewire 的 action
$wire.call('someMethod', param)
 
// 上傳檔案
$wire.upload(
    'property',
    file,
    finishCallback = (uploadedFilename) => {},
    errorCallback = () => {},
    progressCallback = (event) => {}
)
 
// 上傳多個檔案
$wire.uploadMultiple(
    'property',
    files,
    finishCallback = (uploadedFilenames) => {},
    errorCallback = () => {},
    progressCallback = (event) => {}
)
 
// 移除上傳
$wire.removeUpload(
    'property',
    uploadedFilename,
    finishCallback = (uploadedFilename) => {},
    errorCallback = () => {}
)
 
// 底層的 JavaSrcipt 實例
$wire.__instance

AlpineJS 與 Livewire 共享狀態：@entangle

這是一個很強大的功能，可以讓 AlpineJs 與 Livewire 共同使用同一個變數。不管在哪方修改都會同時對兩者造成改變。

用法也很簡單，只要在 x-data 中給變數賦值的時候用上 @entangle 就可以將兩者的變數綁在一起啦：

範例：這樣兩者的 count 就可以即時連動啦！

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

如果不需要在 AlpineJS 每次對連動的變數做修改就回傳到 Livewire 的話，可以加上 .defer。這樣只有在觸發其他更新時才會發送更新。

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