Vite（在Laravel）和Alpinejs不起作用

Question

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

参考：找不到变量：alpine`

Resources/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/Modal

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，我们不能使用要求语句。因此，在分离数据和存储的同时更加复杂。我无法在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()

高山商店不要使用箭头功能

export default ({
    .....
})