如何将Alpine.store方法从CDN模板迁移到Laravel+Livewire(Vite)环境

问题背景 #

之前通过CDN引入TailwindCSS和AlpineJS制作的侧边栏模板，使用Alpine.store实现展开/隐藏交互完全正常。迁移到Laravel 10（搭配Breeze UI、Livewire 3）环境后，改用Vite安装构建Tailwind和Alpine，在resources/js/app.js中配置了如下Alpine Store代码：

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.store('sidebar', {
     open: false,
     hide: false,
     visible: false,

     toggle(value) {
         this[value] = ! this[value]
     },
     toggleOpen() {
         this.open = ! this.open
     },
     toggleHide() {
         this.hide = ! this.hide
     }
})

Alpine.start();

但页面加载及点击交互时，控制台持续抛出以下错误：

Alpine Expression Error: Cannot read properties of undefined (reading 'open')

Expression: "[
         ($store.sidebar.open ? 'md:w-60' : ''),
         ($store.sidebar.hide ? '-translate-x-full': ''),
         ($store.sidebar.visible ? '!block hover:!w-60': '')
     ]"

Alpine Expression Error: Cannot read properties of undefined (reading 'toggleHide')

Expression: "$store.sidebar.toggleHide()"

尝试将Blade中的$store.sidebar.open改为Alpine.store('sidebar').open后，报错消失，但点击交互完全失效。

修复方案 #

核心原因 #

Laravel Breeze默认的Vite配置中可能存在Alpine重复初始化的情况，或者Store在Alpine启动后才完成注册，导致DOM解析时$store全局对象尚未挂载。

具体修复步骤 #

• 移除重复的Alpine初始化代码：检查resources/js/bootstrap.js文件，如果存在自动初始化Alpine的代码（如import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();），直接删除，避免重复启动Alpine导致Store挂载异常。
• 确保Store注册顺序：保持app.js中先注册Store、再调用Alpine.start()的顺序不变，确保Alpine启动时Store已完成注册。
• 正确引入Vite资源：在主布局Blade文件中，确认仅通过@vite(['resources/css/app.css', 'resources/js/app.js'])引入资源，移除任何旧的Alpine CDN链接，避免资源冲突。
• 兼容Livewire 3：如果使用Livewire 3，需调整app.js的代码顺序，先启动Livewire再注册Store：

  import Alpine from 'alpinejs';
  import Livewire from 'livewire';
  
  window.Alpine = Alpine;
  Livewire.start();
  
  Alpine.store('sidebar', {
       open: false,
       hide: false,
       visible: false,
  
       toggle(value) {
           this[value] = ! this[value]
       },
       toggleOpen() {
           this.open = ! this.open
       },
       toggleHide() {
           this.hide = ! this.hide
       }
  })
  
  Alpine.start();
  

• 清除Vite缓存：运行npm run build（生产环境）或重启npm run dev开发服务器，确保最新的JS代码被正确加载。

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