Alpine Data
const dropdown = () => ({
open: false,
toggle() {
this.open = !this.open
},
})
export default dropdown
Import it into app.ts
import dropdown from './ts/dropdown'
Alpine.data('dropdown', dropdown)
In any HTML file
<div x-data="dropdown">
<button @click="toggle">
Open
</button>
<div x-show="open">
About
</div>
</div>
Alpine Store
const itemStore = {
items: [] as Item[],
add(item: Item) {
//
},
remove(id: number) {
//
},
}
export default itemStore
Import it into app.ts
import itemStore from './ts/item-store'
Alpine.store('itemStore', itemStore)
In any HTML file
<div x-data>
<ul>
<template x-for="item in $store.itemStore.items" :key="item.id">
<li x-text="item.text"></li>
</template>
</ul>
</div>
Table of Contents