如何将Alpine.js的$store变量传递给Livewire组件

我有一个名为index.blade.php的Livewire组件，当前代码如下：

<div x-data>
    <div x-text="JSON.stringify($store.data.entities)"></div>
</div>

数据来自app.js里的Alpine Store：

Alpine.store('data', {
    entities: [{'type': 'order', 'reference': '12345678'}],
})

组件能正常渲染出：

[{"type":"order","reference":"12345678"}]

现在想把$store.data.entities的值传给另一个Livewire组件show-entity，但不知道怎么传参。

方法1：用Alpine触发Livewire方法传递数据 #

通过Alpine调用子组件的方法，直接把Store数据传过去：

1. 给show-entity组件加wire:ref标记，方便Alpine定位：

<div x-data>
    <div x-text="JSON.stringify($store.data.entities)"></div>
    <livewire:show-entity wire:ref="showEntity" />
</div>

2. 在Alpine的初始化逻辑里调用子组件的接收方法：

<div x-data="{
    init() {
        $wire.find('showEntity').setEntities($store.data.entities);
    }
}">
    <div x-text="JSON.stringify($store.data.entities)"></div>
    <livewire:show-entity wire:ref="showEntity" />
</div>

3. 在show-entity的PHP组件里定义对应的属性和方法：

// ShowEntity.php
namespace App\Http\Livewire;

use Livewire\Component;

class ShowEntity extends Component
{
    public $entities = [];

    public function setEntities($entities)
    {
        $this->entities = $entities;
    }

    public function render()
    {
        return view('livewire.show-entity');
    }
}

方法2：用@entangle实现双向同步传递 #

如果需要Alpine Store和Livewire组件的数据保持同步，用@entangle更合适：

1. 给Alpine Store加一个 setter 方法，方便Livewire更新数据：

Alpine.store('data', {
    entities: [{'type': 'order', 'reference': '12345678'}],
    
    setEntities(newEntities) {
        this.entities = newEntities;
    }
})

2. 在父组件里通过Alpine把Store数据绑定到Livewire属性，再传给子组件：

<div x-data="{
    entities: $wire.entangle('parentEntities')
}" x-init="entities = $store.data.entities">
    <div x-text="JSON.stringify($store.data.entities)"></div>
    <livewire:show-entity :entities="$parentEntities" />
</div>

3. 父组件（index.blade.php对应的PHP类）定义接收属性：

// Index.php
namespace App\Http\Livewire;

use Livewire\Component;

class Index extends Component
{
    public $parentEntities = [];

    public function render()
    {
        return view('livewire.index');
    }
}

4. show-entity组件通过mount方法接收参数：

// ShowEntity.php
namespace App\Http\Livewire;

use Livewire\Component;

class ShowEntity extends Component
{
    public $entities = [];

    public function mount($entities)
    {
        $this->entities = $entities;
    }

    public function render()
    {
        return view('livewire.show-entity');
    }
}

方法3：动态生成组件并传递参数 #

如果只需要一次性初始化传递，可通过Alpine动态创建组件并传入参数：

<div x-data>
    <div x-text="JSON.stringify($store.data.entities)"></div>
    <div x-init="
        const componentEl = document.createElement('div');
        componentEl.innerHTML = `<livewire:show-entity :entities='${JSON.stringify($store.data.entities)}' />`;
        $el.appendChild(componentEl);
        Livewire.hydrate();
    "></div>
</div>

注意要手动调用Livewire.hydrate()来初始化动态添加的组件。

内容的提问来源于stack exchange，提问作者oliverbj