Alpine.store

Alpine 通过 Alpine.store() API 提供全局状态管理。

注册 Store

你可以在 alpine:init 监听器中定义 Alpine store（如果通过 <script> 标签引入 Alpine），或者在手动调用 Alpine.start() 之前定义它（如果通过构建导入 Alpine）：

通过 script 标签：

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', {
            on: false,

            toggle() {
                this.on = ! this.on
            }
        })
    })
</script>

通过 bundle：

import Alpine from 'alpinejs'

Alpine.store('darkMode', {
    on: false,

    toggle() {
        this.on = ! this.on
    }
})

Alpine.start()

访问 Store

你可以使用 $store 魔法属性在 Alpine 表达式中访问任何 store 中的数据：

<div x-data :class="$store.darkMode.on && 'bg-black'">...</div>

你也可以修改 store 中的属性，所有依赖于这些属性的内容都会自动响应。例如：

<button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>

此外，你可以通过省略第二个参数的方式在外部使用 Alpine.store() 来访问 store：

<script>
    Alpine.store('darkMode').toggle()
</script>

初始化 Store

如果你在 Alpine store 中提供了 init() 方法，它将在 store 注册后立即执行。这对于使用合理的起始值初始化 store 中的状态非常有用。

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', {
            init() {
                this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
            },

            on: false,

            toggle() {
                this.on = ! this.on
            }
        })
    })
</script>

注意上面示例中新添加的 init() 方法。有了这个方法，on store 变量将在 Alpine 在页面上渲染任何内容之前被设置为浏览器的颜色方案偏好。

单值 Store

如果你不需要为 store 使用完整的对象，你可以设置和使用任何类型的数据作为 store。

以下是上面的示例，但更简单地使用布尔值：

<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>