$store
你可以使用 $store 方便地访问使用 Alpine.store(...) 注册的全局 Alpine 数据仓库。例如：
<button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
...
<div x-data :class="$store.darkMode.on && 'bg-black'">
...
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: false,
toggle() {
this.on = ! this.on
}
})
})
</script>
鉴于我们注册了 darkMode 数据仓库并将 on 设置为 false，当 <button> 被按下时，on 将变为 true，页面背景色将变为黑色。
单值数据仓库
如果你不需要一个完整的对象作为数据仓库，你可以设置和使用任意类型的数据作为数据仓库。
以下是上面的示例，但更简单地将其用作布尔值：
<button x-data @click="$store.darkMode = ! $store.darkMode">Toggle Dark Mode</button>
...
<div x-data :class="$store.darkMode && 'bg-black'">
...
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', false)
})
</script>