前面三篇关於 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 }">
	...