今回はNuxtの最新バージョンであるNuxt 3で新しく提供された機能である、useStateについてご紹介したいと思います。
NuxtはSPAやSSRなどの様々なモードで動作することができるフレームワークであり、その中でもuseStateはグローバルなステート管理を行うための機能です。
これまでNuxtではVuexを使用することでグローバルステートの管理を行っていましたが、useStateを使用することでよりシンプルにステートを管理することができるようになりました。
それでは、早速見ていきましょう。

Nuxt 3とは

まずはじめに、Nuxt 3について少し説明します。
Nuxt 3は、Vue.jsベースのフロントエンドフレームワークであるNuxtの最新バージョンです。
NuxtはクライアントサイドのSPAモードやサーバーサイドレンダリング(SSR)モードなど、様々なモードで動作することができます。
そのため、プロジェクトのニーズに応じて最適なモードを選択することができ、柔軟な開発が可能です。
また、Nuxtはプリレンダリングや静的サイトジェネレーションなど、SEOにも優れた特徴を持っています。

Nuxt 3でのステート管理

それでは、Nuxt 3でのステート管理について見ていきましょう。
Nuxtではこれまで、Vuexを使用してグローバルステートの管理を行ってきました。
しかし、Vuexを使用するには多くのコードを記述する必要があり、初心者にとっては敷居が高いと感じることもありました。
そこで、Nuxt 3ではuseStateという新しい機能が提供されました。
このuseStateを使用することで、よりシンプルにステートの管理を行うことができるようになりました。

Nuxt 3のuseStateの使い方

useStateを使用するには、まずNuxtプロジェクトを作成し、その中でnuxt devコマンドを実行します。
次に、store/index.jsファイルを作成し、以下のように記述します。

ここでは、countというステートを定義しています。
また、mutationsを使用してincrementという関数を定義し、countの値をインクリメントするようにしています。
これで、ステートの定義と変更を行うことができるようになりました。

ステートの使用方法

では、定義したステートをどのように使用するのでしょうか。
まずは、pages/index.vueファイルを作成し、以下のように記述します。

ここでは、$store.state.countを使用してcountの値を表示しています。
また、$store.commitを使用してincrement関数を呼び出し、ボタンがクリックされるとcountの値がインクリメントされるようになります。
これで、ステートの表示と変更ができるようになりました。

モジュール化

Nuxt 3のuseStateは、モジュール化することも可能です。
例えば、store/count.jsというファイルを作成し、以下のように記述します。

そして、store/index.jsでは以下のように記述します。

これで、$store.state.countや$store.commit('increment')といった記述をすることなく、$store.count.state.countや$store.count.mutations.incrementといったモジュール名を付与した記述が可能になります。
また、複数のモジュールを作成することもでき、よりステートの管理を柔軟に行うことができるようになりました。

Nuxt 3のuseStateとVuexの比較

それでは、Nuxt 3のuseStateとVuexを比較してみましょう。
まず、Vuexでは以下のように記述する必要があります。

一方、useStateでは以下のように記述することができます。

どちらも同じステートとミューテーションを定義していますが、Vuexの方が冗長な記述をしなければならず、初心者にとっては理解しづらい部分もあります。
また、Vuexではアクションを使用して非同期処理を行うことができますが、useStateではそのような機能は提供されていません。
しかし、非同期処理を行う必要がない場合や、非常にシンプルなステートの管理を行いたい場合には、useStateの方がより使いやすいと言えるでしょう。

まとめ

以上、Nuxt 3のuseStateについてご紹介しました。
Nuxt 3では、これまで使用していたVuexに代わる新しいステート管理機能として、よりシンプルな記述が可能なuseStateが提供されました。
初心者にも取り入れやすい機能であり、より柔軟なステート管理が可能になりました。
今後もNuxtは進化していき、より使いやすくパワフルなフレームワークになっていくことでしょう。

ご清聴ありがとうございました。

[cv:issue_marketplace_engineer]