Session

フロントエンドの状態管理というとVuex、Piniaによるグローバルな状態管理の手法がよく取り上げられます。しかし、開発を進めていると、Atomic Designでいうmoleculesやorganisms規模のコンポーネントに状態を持たせたい、などローカルな状態管理が欲しくなる場面も発生します。

このとき、コンポーネント内で状態を定義すると外から状態の参照や操作をすることが難しくなってしまいます。これを解決するために、親コンポーネントの状態をpropsやv-modelで渡すと、状態管理の責務が親に移りコードの見通しが悪くなります。

本LTでは、Composition APIのprovide/injectを活用してローカルな状態を管理する方法を紹介します。Composition APIのinjectを用いると外からの状態操作をオプショナルにできるため、実装がシンプルになります。