Alpine JS 从 js 函数中更改数据

Question

一旦完成将产品加载到包中，我正在尝试从更大的 js 文件调用函数

openBag();

。

我有这段代码，其中

changeData

不断返回未定义。

这是正确的做法吗？我有什么问题吗，或者我应该以不同的方式处理这个问题？

import Alpine from 'alpinejs'
window.Alpine = Alpine

window.addEventListener('alpine:init', () => {
    Alpine.data('setData', () => ({
        showDrawer:false, drawerTab:'', showNav:false, showBack:false, showMenu:false, showFilters:false, isMobile:(window.innerWidth < 480) ? true : false
    }))
})

Alpine.start()

window.openBag = function() {
    const changeData = Alpine.data('setData');
    if (changeData) {
        changeData.showDrawer = true,
        changeData.drawerTab = 'bag'
    } else {
        console.log(changeData);
    }
}

Answer 1

用

Alpine.data()

你可以定义一个组件，它不是为了访问组件的属性。您正在寻找的是组件上的事件侦听器，如果

openBag

事件是从其他 JS 函数调度的，它可以采取行动，例如：

const openBagEvent = new Event("openBag");

// Dispatch the event on some element (can be the body)
element.dispatchEvent(openBagEvent);

在 Alpine.js 组件中，我们使用

x-on

快捷方式创建一个事件监听器：

<div x-data="setData" @open_bag.window.camel="showDrawer = true; drawerTab = 'bag'">
...
</div>

如果组件收到

openBag

自定义事件，那么它将改变它的一些属性。