Vue Composable

Definition

Composable は、Vue Composition API を使って stateful なロジックを再利用可能な関数として切り出した単位である。

Why It Matters

Composition API の価値は setup の書き方だけではない。ロジックを component から切り離して再利用できることが本質であり、その中心が composable である。

Current Understanding

Composable は UI を描画しない。state, computed, watch, lifecycle などを組み合わせて、ある関心事に関するロジックをまとめる。その結果、component は表示と契約に集中しやすくなる。

Vue では mixin よりも composable の方が依存関係とデータの出所を見通しやすい。実務では、API 呼び出し、フォーム状態、画面共通ロジックなどを composable へ切ると設計が安定しやすい。

Connections

• Vue Component
• Vue Props and Emits
• Vue Reactivity
• Vue watch
• Composables - 状態を持つロジックの再利用
• Plugins - アプリ全体への機能注入

New Insights

• composable は再利用関数というより、関心事ごとの stateful logic unit として捉える方が強い
• component との役割分担を意識すると、UI とロジックの分離がしやすくなる

Open Questions

• composable と store の境界はどこで切るべきか
• 複数 composable を束ねる設計はどの段階で学ぶべきか