はじめに

この記事は開発における個人的なマインドになります。
ベストプラクティスから逸脱した内容もあると思いますので、訂正や議論がある際にはコメントをよろしくお願いします。

状態管理とは

全ての Vue コンポーネントインスタンスは、すでに自身のリアクティブな状態（state）を "管理" している

state（状態）
アプリケーション駆動する信頼できる情報源（the source of truth）です

view（ビュー）　
state（状態）の宣言的な写像（declarative mapping）です

actions（アクション）　
view（ビュー）からのユーザー入力に反応して state を変更するための方法を提供します

vueにおいてこのシンプルな構成を守りながら開発を行うことでプロジェクトの品質を保つことができます。

親コンポーネントから子コンポーネントさらには孫コンポーネントとデータを受け渡していくバケツリレーを行なっていくと state（状態） が崩壊していくことがあります。
APIとの連携による非同期通信により子や孫にデータが正常に受け渡せないこともあります。

単一方向データフローの構成を変更する。
変更する中でシンプルな構成は保ち続ける必要があります。
シンプルさを保つため、プロジェクト全体でこの構成を守る必要があり、状態管理ソリューションの形を一元化する必要するがあります。

自前の状態管理ソリューションでは大規模になることで保守性を失う事があります。
その為状態管理ライブラリを用います。
Vue２ではVuexを用いていましたが現在新しい機能の実装はされおらずまた、 PiniaはVuexよりシンプルな為よほどの理由がない場合はPibiaを使うことをお勧めします

開発のマインドとしてVueファイル内でStateやActionを定義した場合冗長である可能性を常に考慮する
何が冗長かの判断がしやすくなる

※Piniaの構成の詳細は省略します

Vueで開発するマインドは「シンプル」にする事です
開発をしてる時は常にシンプルに実装することを意識しましょう

株式会社コネクター・ジャパンでは一緒に働いてくれる仲間を募集しています！

事業拡大に伴い、エンジニアを大募集しています。
興味のある方は下記リンクから弊社のことをぜひ知っていただき応募してもらえると嬉しいです。
▼会社について
https://www.wantedly.com/companies/cnctor/about
▼代表メッセージ
https://cnctor.jp/10years-anniversary/
▼応募はこちら
https://www.wantedly.com/companies/cnctor/projects