Composition API でロジックを切り出すというのを全然分かっていなかった

コンポーネントとロジックを分離するだけだから、コンポーネントに書いているロジックは基本的に別ファイル(hooks とかそういうやつ)に移して、コンポーネントでそのファイルから必要な state や関数を呼び出せばいいだけという短絡的な思考でコードを書いていたら本当にわけがわからないし時間がかかるしだったので、メモ書いて、今後学ぶべきこともちゃんと書き残したい。

理解不足で時間を溶かす

Nuxt だとreactiveやrefでリアクティブな変数(=state)を定義して、computed はそのまま、methdos は普通の関数としてそれぞれロジック置き場に定義してしまえばそれだけでいいと思っていた。

が、普通に定義した state や computed を export すると、他のコンポーネントで利用している場所があった場合にそのコンポーネントと state や computed の値を共有することになるというのを考えてなかった。

あと数日前に非同期処理で Promise が返ってくる場合どうすればいいのか悩んでたのもこれ。Options API であれば methods でくくれば Vue が良い感じに処理してくれていたが、よりプレーンな JavaScript を書くイメージ(表現があっているのか分からない)になり、コンポーネント(の setup)で受け取った値が Promise で、Promise のまま template に反映されてしまうという感じになっていた。

という感じで、そもそも色々理解が不足していて時間を食ったのでちゃんと気をつけようと

関数内に定義する必要があった

Vue.js composition-api を使った開発でおすすめしたいこと - Qiita

• 単純に state や関数を export すると global に開かれた状態になる
• useXxxという関数を定義してその中で return して、useXxxを export することで閉じられた(コンポーネント local な)state や関数ができると最初は勘違いしていた、ので冷静になって読み直して理解し直した
• useXxx内で定義した state や関数はuseXxxだけを export してコンポーネントで利用する場合に、コンポーネントに閉じられた(コンポーネント local な)state や関数になる
• 普通に export、もしくはuseXxxの外のスコープで定義してuseXxxで return したものは、useXxxのスコープ外なので global になる
• global な state や computed を定義する場合は、各々で export するのではなく、定義したものをuseXxxで return するほうが、使う側のインターフェースが一緒(import { useXxx } from '...')になってよい

なぜ関数内に定義する必要があるのか

• たぶんクロージャとかスコープとかそういう話？そこらへんをもう一度掘り下げる
• もしかしたらメモリとかの話にちょっとなってくるかもしれない
• ここらへんはちゃんと学ぶ