Hello,
I am running into an issue with Alpine.store
and I can't seem to track it down. I am using Alpine.store
in another project without any trouble. After trying (and failing) to compare both projects to see what's different, I thought I would seek help. I have a feeling it might be super obvious, I just can't see it.
<x-navigation.container />
<div x-data ...>
<x-navigation.slide-over.container />
<header ...>
<x-navigation.desktop />
<x-navigation.mobile />
</header>
</div>
<x-navigation.slide-over.container />
<div x-data x-show="$store.tNav.shown" ...>
...
</div>
<x-navigation.desktop />
<nav x-data ...>
...
</nav>
<x-navigation.mobile />
<nav x-data ...>
...
</nav>
The desktop and mobile navigations have a button that can toggle the slide over.
@click.prevent="$store.tNav.toggle()"
There are no errors when the page loads. Only when the button is clicked.
Uncaught TypeError: $store.tNav.toggle is not a function
app.js (related)
import { Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm";
Alpine.store("tNav", () => ({
show: false,
init() {
alert("foo");
},
get shown() {
return this.show;
},
get hidden() {
return ! this.show;
},
toggle() {
this.show = ! this.show;
},
}));
Livewire.start();
Note that the alert does not even fire.
It doesn't matter if I try to load this from a <script>
or bundled.
app-layout.blade.php
<head>
@livewireStyles
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@livewireScriptConfig
</body>
livewire.php
'inject_assets' => true/false,
It makes no difference what the value is set to.
You're defining the store incorrectly. The object shouldn't be returned from a function. I've just tested this locally and it's working.
Alpine.store("tNav", {
show: false,
init() {
alert("foo");
},
get shown() {
return this.show;
},
get hidden() {
return ! this.show;
},
toggle() {
console.log('ok')
this.show = ! this.show;
},
});
Wow. How did I not see that? It's shown in the Alpine documentation too. Thanks, I appreciate it!