Vite(在Laravel)与AlpineJS不工作

Question

根据迁移说明，我已经从Laravel Mix迁移到Laravel Vite。一切都是编译和工作,除了高山。在我的控制台中，我得到以下内容:

ReferenceError: Can't find variable: Alpine '

资源/app.js

import Alpine from 'alpinejs';
window.Alpine = Alpine;
// Stores need to be defined before Alpine.start()
import './alpine-stores/modal';
Alpine.start();

alpine-stores/模态

Alpine.store('modal', {
active: false,
id: null,
open(id) {
this.active = true
this.id = id
document.body.classList.add('overflow-hidden')
window.dispatchEvent(new CustomEvent('modalopened'))
},
close() {
this.active = false
this.id = null
document.body.classList.remove('overflow-hidden')
window.dispatchEvent(new CustomEvent('modalclosed'))
}
})

Answer 1

由于vite，我们不能使用require语句。因此，分离文件的数据和存储是比较复杂的。我在alpinejs网站上找不到任何官方信息。我也经历过同样的问题，用这种方法解决了这类问题。

alpine-data

export default () => ({ 
active: false,
id: null,
open(id) {
this.active = true
this.id = id
document.body.classList.add('overflow-hidden')
window.dispatchEvent(new CustomEvent('modalopened'))
},
close() {
this.active = false
this.id = null
document.body.classList.remove('overflow-hidden')
window.dispatchEvent(new CustomEvent('modalclosed'))
}
})

资源/app.js

import Alpine from 'alpinejs'
window.Alpine = Alpine
// Stores need to be defined before Alpine.start()
import modal from './alpine-stores/modal.js'
Alpine.data('modal', modal)
Alpine.start()

对于alpine store，不要使用箭头函数

export default ({
.....
})