Skip to content

Latest commit

 

History

History
26 lines (16 loc) · 2.25 KB

index.md

File metadata and controls

26 lines (16 loc) · 2.25 KB

Composables とは何か ?

Composables とは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。Options API で主流な mixins と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。Composition API の詳しい説明は こちら をご参照ください。

Composables の主な特徴は以下の通りです。

  • 再利用可能なロジック: Composables を使用すると、コンポーネント間で共有したいロジックや状態をモジュールとして定義し、それを簡単にインポートして使用できます。
  • 関数として定義: Composables は通常、関数として定義され、必要な状態やメソッドを返します。この関数は Vue の Composition API を使用して内部で状態管理や副作用を処理します。
  • 明示的な依存関係: Composables を使うことで、依存関係が明示的になり、どのロジックや状態がどのコンポーネントで使用されているかが明確になります。

Nuxt では、composables/ ディレクトリに Composables なロジックを格納することが多く、自動インポート の対象になります。

チャレンジ

それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。

  1. 既存の vue ファイル（app.vue）の確認してください。
  2. カウンターロジックを composables/useCounter.ts に切り出してください。
  3. app.vue に 2 で切り出したロジックを適用してください。

ヒント

  • Composable は関数として定義され、必要な状態やメソッドを返します。
  • composables/ ディレクトリに作成したロジックは自動インポートが適用されます。

:ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}