状态
状态（Alpine 监视变化的 JavaScript 数据）是你在 Alpine 中所做一切的核心。你可以为一块 HTML 提供局部数据，或者通过 x-data 或 Alpine.store() 使其在页面上的任何地方全局可用。
局部状态
Alpine 允许你在一个 x-data 属性中声明一个 HTML 块的状态，而无需离开你的标记。
以下是一个基本示例：
<div x-data="{ open: false }">
...
</div>
现在，该元素上或其内部的任何其他 Alpine 语法都可以访问 open。正如你所料，当 open 因任何原因发生变化时，所有依赖于它的内容都会自动响应。
嵌套数据
在 Alpine 中，数据是可以嵌套的。例如，如果你有两个带有 Alpine 数据的元素（一个在另一个内部），你可以从子元素中访问父元素的数据。
<div x-data="{ open: false }">
<div x-data="{ label: 'Content:' }">
<span x-text="label"></span>
<span x-show="open"></span>
</div>
</div>
这类似于 JavaScript 本身的作用域（函数内的代码可以访问在该函数外部声明的变量）。
你可能已经猜到，如果子元素有一个与父元素属性同名的数据属性，子元素的属性将优先。
单元素数据
虽然这对某些人来说可能很明显，但值得一提的是，Alpine 数据可以在同一个元素上使用。例如：
<button x-data="{ label: 'Click Here' }" x-text="label"></button>
无数据 Alpine
有时你可能想使用 Alpine 功能，但不需要任何响应式数据。在这些情况下，你可以完全不向 x-data 传递表达式。例如：
<button x-data @click="alert('I\'ve been clicked!')">Click Me</button>
可复用数据
使用 Alpine 时，你可能需要复用一块数据及/或其对应的模板。
如果你使用像 Rails 或 Laravel 这样的后端框架，Alpine 首先建议你将整个 HTML 块提取到模板片段或 include 中。
如果这对你来说不太理想，或者你不在后端模板环境中，Alpine 允许你使用 Alpine.data(...) 全局注册和复用组件的数据部分。
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
}
}))
现在你已经注册了"dropdown"数据，可以在标记中任意多地使用它：
<div x-data="dropdown">
<button @click="toggle">Expand</button>
<span x-show="open">Content...</span>
</div>
<div x-data="dropdown">
<button @click="toggle">Expand</button>
<span x-show="open">Some Other Content...</span>
</div>
全局状态
如果你想让某些数据对页面上的每个组件都可用，可以使用 Alpine 的"全局 store"功能。
你可以使用 Alpine.store(...) 注册一个 store，并使用魔法属性 $store() 来引用它。
让我们看一个简单的示例。首先，我们全局注册 store：
Alpine.store('tabs', {
current: 'first',
items: ['first', 'second', 'third'],
})
现在我们可以从页面上的任何位置访问或修改它的数据：
<div x-data>
<template x-for="tab in $store.tabs.items">
...
</template>
</div>
<div x-data>
<button @click="$store.tabs.current = 'first'">First Tab</button>
<button @click="$store.tabs.current = 'second'">Second Tab</button>
<button @click="$store.tabs.current = 'third'">Third Tab</button>
</div>