状态不佳时如何在alpine js库中执行x-data命令？

Question

当按钮处于非状态时，如何展开 div？

<div x-data="{ open: false }">
    <span x-show="open">
      Content...
    </span>
</div>


<button @click="open = true">Expand</button>

Answer 1

一种方法是将状态保持在全局 $store

<script>
  document.addEventListener('alpine:init', () => { Alpine.store("mystate", { open: false })})
</script>
  <div x-data>
    <span x-show="$store.mystate.open">
      Content...
    </span>
  </div>


<button x-on:click="$store.mystate.open = !$store.mystate.open">Toggle</button>

状态不佳时如何在alpine js库中执行x-data命令？

How to execute x-data commands in alpine js library when out of state?

alpine.js