目次
Piniaとは
PiniaはVuejs向けのState Management(状態管理)ライブラリです。
State Managementとはいわばストレージ/ストア(倉庫)のことです、アプリケーション内にStoreという場所を作っておき、そこにコンポーネント間で共有するデータの保存、管理ができるようになります。
またデータを保存するだけではなくデータを更新することもできます。
例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態など、Piniaを使う事でこれらを各コンポーネントやページのどこでも使う事ができるようになります。
以前はVueのGlobal State ManagementライブラリとしてVuexが有名でしたが、新たにPiniaが登場してからは、Vue公式の状態管理ライブラリとして利用が推奨されています。
Piniaの特徴
・簡単にグローバルなデータ管理を実現できる
・記述量が少ないため、スッキリした可読性が高いコードになる
・学習コストが低い
・Composition APIを意識して実装されてるが、OptionsAPIやVue2でも使える
・TypeScriptをフルサポート
準備
npmのコマンドでインストールしましょう。
インストールが完了したらmain.jsにPiniaを追加します。
srcフォルダの下にstoresという名前のフォルダを作成します。複数のStoreを作成することができますが、今回はlogin.jsを作成しました。
Storeを定義するためにpiniaからdefineStoreをimportします。
stateに共有したい変数を定義し初期値を設定しています。
defineStore関数の戻り値をuseLoginStoreという名前をつけてexportしています。
次にコンポーネント側です。
exportした関数をコンポーネントでimportして利用します。
stateに設定した初期値が表示されるかと思います。
Storeにデータを保存する
$patchメソッドを利用するとstateの値を更新することができます。
追加したPatchボタンをクリックするとstateの中の値が更新され、ブラウザ上の表示も変わります。
Storeデータのリセット
$resetメソッドを利用するとstateの値が初期値にリセットされます。コンポーネントにボタンを追加して試してみましょう。
Actions
login.jmに戻ります。Actionsには、非同期処理を実行する関数を登録できます。
これでコンポーネントから、先程stateのデータを利用したように、fetchData関数を利用することが可能になります。
まとめ
以上になります。いかがだったでしょうか。
今回はPinia の使い方の中でも基本的なものを紹介しました。
ぜひ参考にしていただけますと幸いです。