Count:0
Pinia でグローバルな状態管理をするには、「src/stores」に専用の tsファイルを作成します。
今回は、カウントアップしたカウントを、グローバルに状態管理するだけのものを作成しています。
さて、このページでは、「counter.ts」を一箇所修正して 2通りのテスト をしてもらいますので、 VScode で src/stores/counter.ts を開いてください。
◆ テスト1
まずは、このページでカウントアップボタンを押して、カウントが増えることを確認してください。
そして、 Home に移動して、「/pinia」で n回クリックしました。 の回数を確認してください。
このページでクリックした回数（状態）が、Home にも反映されていると思います。
これが、Pinia を使ったのグローバルな状態管理です。
◆ テスト2
次に、 こちら に移動して、ブラウザの「戻る」で戻って来て下さい。
カウントがリセットされて 0 になっていると思います。
これは「状態」のデータがメモリ上に保持されているためで、 <a> タグのリンクではメモリがリセットされるので、カウントは 0 になります。
Home へのリンクは <NuxtLink /> のため、移動してもメモリが保持されるのでカウントが保持されます。
◆ テスト3
最後のテストです。
まず、「counter.ts」の persist: false を persist: true に変更して保存してください。
適当にカウントアップして、 こちら に移動して、ブラウザの「戻る」で戻って来て下さい。
今度は、カウントがリセットされずに永続化されて保持されていると思います。
これは、persist: true にすることで、 ブラウザの LocalStorage にデータを保存するようになるためです。
👉 Pinia について⧉ も参照ください。