未定义 Alpine JS 全局函数

Question

我正在使用 Alpine JS store() 使全局函数可用于切换模态状态。

模块:

export default () => ({
    /**
     * @property isOpen - controls the state of the Contact Form Modal
     */
    isOpen: false,

    open() {
        this.isOpen = true
    },

    close() {
        this.isOpen = false
    },
});

那我就这样用:

import modalContactForm from './alpine/modal-contact-form';

// Alpine.store sets data for GLOBAL usage
Alpine.store('modalContactForm', modalContactForm);
Alpine.start();

然后 HTML:

<button x-data @click="$store.modalContactForm.open()"></button>

但是我得到:

Alpine Expression Error: $store.modalContactForm.open is not a function

而且我不知道如何调试这种情况。

有趣的是，如果我将对象直接传递给 Alpine.store()，它会起作用。

Alpine.store('modalContactForm', {
        isOpen: false,
    
        open() {
            this.isOpen = true
        },
    
        close() {
            this.isOpen = false
        },
    });
Alpine.start();

Answer 1

在外部模块文件中将商店导出为简单对象，而不是匿名函数：

const modalContactForm = {
    /**
     * @property isOpen - controls the state of the Contact Form Modal
     */
    isOpen: false,

    open() {
        this.isOpen = true
    },

    close() {
        this.isOpen = false
    },
}

export default modalContactForm

未定义 Alpine JS 全局函数

Alpine JS global function not defined

alpine.js