Alpine.store()を活用してグローバルな状態を定義しよう

別のファイルでグローバルな状態を定義する

JSファイルをViteやWebpackでバンドルする場合に使う書き方を紹介していきます。

覚えること

Alpine.store

これはグローバルな状態を定義するために使います。
以下が基本の形です。x-dataの書き方とほぼ同じです。

Alpine.store('名前', {
    プロパティ: 値,
    関数() {
        // 処理
    }
})

これをJSファイルにどのように書けばいいかと言うと、

// alpinejsをインポートする
import Alpine from 'alpinejs'
 
// グローバルなデータを定義する
Alpine.store('darkMode', {
    on: false,
    toggle() {
        this.on = ! this.on
    }
})
 
// v3からインポート後にAlpine.start()を呼び出す必要がある↓
Alpine.start()

$store

これはマジックプロパティと呼ばれる特殊なプロパティの一つです。
これを使えばAlpine.store()で登録した状態を取得できます。

以下が基本の形です

    $store.名前.プロパティ名 or 関数名

これだけで呼び出せます。

使用例

実際にこんな感じで使えます。

See the Pen Untitled by gorimatyan (@gorimatyan) on CodePen.

$storeのところでAlpine.store()で登録したグローバルな値を参照しています。

まとめ

簡単に登録できた。