iT邦幫忙

2021 iThome 鐵人賽

0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 31

Day 30 | 很像 Vue 的 AlpineJS(五): 與 Livewire 共享資料

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

上一篇
Day 29 | 很像 Vue 的 AlpineJS(四): x-on
下一篇
Day 31 | 常見 Livewire 問題: jQuery 在渲染時會打回原形
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言