如何重用 AlpineJs 数据？

Question

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<div x-data="info">
  <span x-text="data"></span>
</div>

<div x-data="info">
  <span x-text="data"></span>
</div>

<script>
  let info ={
  data: "hello"
}

document.addEventListener("alpine:init", () => {
    info = Alpine.reactive(info)
    Alpine.data("info", () => info);
 });
</script>

上面的代码给出以下错误：

如何解决问题并重用 AlpineJS 数据？

Answer 1

您可以使用Alpine.store 访问全局 Alpine 状态。 (https://alpinejs.dev/magics/store)

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<div x-data>
  <span x-text="$store.info.data"></span>
</div>

<div x-data>
  <span x-text="$store.info.data"></span>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('info', {
            data: "Hello ??"
        })
    })
</script>