如何使用Alpine JS添加条件类及跨组件取值用于条件类

1. 如何使用Alpine JS添加条件类？ #

Alpine JS 通过 :class（或全称 x-bind:class）指令实现条件类绑定，核心语法是对象键值对：{ '目标类名': 布尔判断条件 }，当条件为true时，对应的类会自动添加到元素上。

修正你代码中的错误 #

你原按钮的:class写法存在语法问题：

:class="{[showCartDrawer]: true, 'bg-white text-black': bg-black text-white }"

• [showCartDrawer]写法错误：类名需作为对象键，布尔条件作为值，比如想在showCartDrawer为真时添加类，应写成'active': showCartDrawer
• bg-black text-white不是有效布尔条件：需替换为布尔变量或表达式，比如isDarkMode

正确示例 #

<button 
    type="button"
    title="Cart button"
    @click="$dispatch('toggle-cart')"
    class="rounded-full py-1 px-2 text-[12px]"
    :class="{ 
        'cart-button-active': showCartDrawer, // 抽屉显示时添加激活类
        'bg-white text-black': !isDarkMode,   // 非暗黑模式样式
        'bg-black text-white': isDarkMode     // 暗黑模式样式
    }"
>
    <span>{{ 'templates.cart.cart' | t }}</span>
    <span x-text="cart_count" class="cart__count"> {{ cart.item_count }} </span>
</button>

2. 如何从另一个组件获取变量值并将其用于条件类？ #

Alpine JS 组件默认状态隔离，可通过自定义事件传递或全局Store实现跨组件状态共享，以下结合你的代码给出两种方案：

方案1：自定义事件传递状态 #

适合简单的状态同步场景：

1. 修改cart-drawer.liquid，在状态变化时派发事件传递状态：

<div x-data="{ showCartDrawer: false }"
    x-show="showCartDrawer"
    @cart-updated.window="updateCart"
    @toggle-cart.window="showCartDrawer = !showCartDrawer; $dispatch('cart-drawer-status', { isOpen: showCartDrawer })"
>
</div>

2. 修改header.liquid的按钮，监听事件并同步状态，再用于条件类：

<button 
    type="button"
    title="Cart button"
    x-data="{ showCartDrawer: false }"
    @click="$dispatch('toggle-cart')"
    @cart-drawer-status.window="showCartDrawer = $event.detail.isOpen"
    class="rounded-full py-1 px-2 text-[12px]"
    :class="{ 
        'bg-white text-black': showCartDrawer,
        'bg-gray-100 text-gray-800': !showCartDrawer
    }"
>
    <span>{{ 'templates.cart.cart' | t }}</span>
    <span x-text="cart_count" class="cart__count"> {{ cart.item_count }} </span>
</button>

方案2：Alpine全局Store（推荐复杂场景） #

适合多组件共享同一状态的场景：

1. 在主题theme.liquid的<script>中定义全局Store：

document.addEventListener('alpine:init', () => {
    Alpine.store('cart', {
        showDrawer: false,
        toggleDrawer() {
            this.showDrawer = !this.showDrawer;
        }
    });
});

2. 修改cart-drawer.liquid，直接使用Store状态：

<div x-data=""
    x-show="$store.cart.showDrawer"
    @cart-updated.window="updateCart"
    @toggle-cart.window="$store.cart.toggleDrawer()"
>
</div>

3. 修改header.liquid的按钮，直接用Store状态绑定条件类：

<button 
    type="button"
    title="Cart button"
    @click="$store.cart.toggleDrawer()"
    class="rounded-full py-1 px-2 text-[12px]"
    :class="{ 
        'bg-white text-black': $store.cart.showDrawer,
        'bg-gray-100 text-gray-800': !$store.cart.showDrawer
    }"
>
    <span>{{ 'templates.cart.cart' | t }}</span>
    <span x-text="cart_count" class="cart__count"> {{ cart.item_count }} </span>
</button>

注：你原cart-drawer.liquid的x-data多了一个冗余闭合}，且@cart-updated.window="updateCart;"多了分号，已在示例中修正。

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