Vue3でstoreを使って次画面へデータを保持する方法

中山テックです。

Vue3でstoreを使う方法のメモとなります(備忘録)
VuexからPiniaを使うことが推奨されたことや、単に使い方を残したいというだけで当ブログを執筆しております。

そんなの簡単だよ！という方はスルーしちゃってください。

今回やりたいこと

非常にシンプルな処理です。

まず、ユーザ登録画面にてメールアドレスとパスワードを入力します。
登録ボタンを押下するとDBへ更新が走り、登録を行います。

正常に処理を行ったことを認識したらTOP画面に戻ります。

戻ったら登録完了的なメッセージを出すという流れです。

まずはPinia(ピーニャ)をインストール

npm install pinia

vuexの後継として推奨されているライブラリです。

storeもCompositionAPIでの開発がしやすかったり、TypeScriptの型がサポートされていたりとメリットが多め(by ChatGPT)

登録画面

あまりにもシンプル過ぎやしませんかね、と言われても大事なのはここじゃないです(汗

では早速登録処理から見ていきましょう。