Start a discussion
Back
ReplySubscribe
Alpine.jsGo to solution

Alpine.store not initialising

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.

Haz
Haz
Moderator
0
2
116
alex
alex
Moderator
Solution

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;
    },
});
1
Reply
Haz
Haz
Moderator

Wow. How did I not see that? It's shown in the Alpine documentation too. Thanks, I appreciate it!

1
Reply