如何在Alpine中使用全局字符串Store打开模态框

你的思路正确，但模态框未正常工作的核心原因是没有正确响应全局状态变化，且自定义事件toggle-menu从未被触发，导致showMenu变量始终为初始的false。以下是两种简洁的修复方案：

方案一：直接绑定全局状态（最推荐） #

去掉多余的showMenu中间变量，直接用全局store的type值控制模态框显示，Alpine会自动监听store变化并更新视图：

<div
  x-show="$store.panel.type === 'menu'"
>
  <div
    x-show="$store.panel.type === 'menu'"
    x-transition:enter="transition-height ease-in-out duration-1000"
    x-transition:enter-start="h-0"
    x-transition:enter-end="h-screen"
    x-transition:leave="transition-height ease-in-out duration-1000"
    x-transition:leave-start="h-screen"
    x-transition:leave-end="h-0"
  >
    // 菜单内容
  </div>
</div>

若需点击模态框外部关闭，可添加遮罩层并绑定事件清空store的type：

<div
  x-show="$store.panel.type === 'menu'"
  @click.outside="$store.panel.type = ''"
>
  <!-- 菜单内容 -->
</div>

方案二：触发全局事件（保留原有变量逻辑） #

如果想保留showMenu变量，需在store的toggle方法里触发全局事件，让模态框监听到状态变化：

首先修改store代码：

document.addEventListener('alpine:init', () => {
  Alpine.store('panel', {
    type: "",
    toggle(string) {
      this.type = string;
      // 触发全局事件，通知所有模态框更新状态
      window.dispatchEvent(new CustomEvent('panel-updated'));
    }
  })
})

再修改模态框代码，监听全局事件：

<div
  x-data="{ showMenu: false }"
  x-show="showMenu"
  @panel-updated.window="showMenu = $store.panel.type === 'menu'"
>
  <div
    x-show="showMenu"
    x-transition:enter="transition-height ease-in-out duration-1000"
    x-transition:enter-start="h-0"
    x-transition:enter-end="h-screen"
    x-transition:leave="transition-height ease-in-out duration-1000"
    x-transition:leave-start="h-screen"
    x-transition:leave-end="h-0"
  >
    // 菜单内容
  </div>
</div>

额外优化：支持点击同一按钮关闭模态框 #

若希望点击已激活的按钮能关闭对应模态框，可修改store的toggle方法：

toggle(string) {
  // 当前type与传入值相同则清空（关闭），否则设置为传入值（打开）
  this.type = this.type === string ? "" : string;
}

按钮逻辑无需修改，即可支持切换打开/关闭状态。

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