ComposableとかCompositionとか

まずはNuxt3スタートはできたのだとして、さてこの先に進む前に、どうも一旦Vueに戻ってかかる必要がありそうです。以前少しかじってからずいぶん経っていて、以前のことはほとんど覚えていないので最初から新たに学習しなおす感じです。そしていきなりつまずきました。Composition API てなに? Composable って何?

幸い、Vueには日本語で読めるドキュメントが用意されていて助かります。それから、Microsoftさんの翻訳ドキュメントなんかと比べれば、ずいぶん読みやすい説明になっています。途方に暮れるということはなさそうです。とはいえ、「Composition API は Vue のミュータブルできめ細かなリアクティブさをベースにしています」のような説明には、やはり、底なし沼に足を取られるようで思考停止してしまいます。とにかく、あまり振り回されないようにしながら自分なりに整理をしていくことにしましょう。

Composition API

単一コンポーネントの<script setup>の中に記述する

import { ref, onMounted } from 'vue'

の ref や onMounted のこと
あと依存性注入

Composable

やはり<script setup>の中に記述する

const { status, data, signIn } = useAuth();

の useAuth のこと
useAuth は、いろんなページやComponentで必要になる。
いろんなページで使えるようにロジックだけを抜き出せるようにしたもの。
Composableの中でもComposition APIを使うことができる

とりあえず、これでComposableとComposition APIの関係はわかるようになりました。理解できたか?は置いておいて、特に混乱することもなく使うことはできそうです。ReactのuseSateやuseEffectよりは優しく感じました。Vueドキュメントによると、 Composition API は関数型プログラミングではないでそうです。たぶんそれが理由なのでしょう。しかし、私には何を関数型といい、どうして関数型ではないのかは、まだよくわかっていません。いつか理解にたどりつけると良いのですが... p

登録:2024-05-22 05:14
更新:2024-05-22 10:51
by nasu38yen
Copyright (C) 2014 Stadio Peace All Rights Reserved.