如何复用AlpineJS数据？现有实现出现报错该如何解决

报错原因 #

你原代码报错的直接原因是，Alpine.data() 会自动对工厂函数返回的对象做响应式封装，你提前用Alpine.reactive()处理了info对象，重复的响应式封装触发了内部冲突。同时Alpine.data()的设计预期是工厂函数每次调用返回全新的独立对象，你返回同一个引用也不符合其使用规范。

根据你的实际需求，可选择以下两种方案实现数据复用：

方案1：复用组件逻辑，每个组件实例状态独立 #

适合封装可复用的组件逻辑，每个使用x-data="info"的组件都会生成独立的数据，互相不会影响：

<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>
document.addEventListener("alpine:init", () => {
  // 工厂函数每次调用返回全新的配置对象
  Alpine.data("info", () => ({
    data: "hello"
  }));
});
</script>

方案2：多组件共享同一份全局响应式状态 #

如果需要所有引用的组件共用同一份数据，修改后所有地方同步更新，使用Alpine官方提供的全局状态APIAlpine.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>
  <button @click="$store.info.data = '修改后的内容'">修改全局数据</button>
</div>

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

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

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