Alpine.js-将javascript变量传递给Livewire

Question

我有一个名为index.blade.php的简单Livewire组件。它目前所做的一切都呈现在下面：

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

上面的数据来自我的app.js文件：

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

因此，在我的组件中，将呈现以下内容：

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

这很好用。但是，我想将$store.data.entities的值传递给另一个Livewire组件：

<div x-data>
<div x-text="JSON.stringify($store.data.entities)"></div>
<!-- Show specific entity -->
@livewire('show-entity', [])
</div>

但是，我不确定如何将$store.data.entities作为参数传递给show-entity组件？

Answer 1

如果您使用的是Livewire 2或更高版本，则可以使用$wire。

将div移动到您的Livewire组件内，然后简单地：

<div x-data="{'entities': JSON.stringify($store.data.entities)}" x-text="entities" x-init="$wire.set('entities', entities')"></div>

在初始化Alpine时，它应该将Livewire变量(在本例中称为$entities(设置为JSON的值。