composable、むずいわ

まえがき

別々のcomponentから同じcomposableを使った結果、インスタンスが共有されずバグが起きたので（n敗）

まずcomposableという概念がわからん

ぼんやりとした理解

  • なんかオブジェクトっぽいよね（状態と関数を持つもの全部そう言うマン）
    • componentはhtmlのパーツ分離だよね（わかりやすい）
      • なのでcomposableはJSのパーツ分離なんだろうなあ……
  • あれ？じゃあ普通にオブジェクトでよくね？メリットがわからん
  • そもそもどういう責務を担うわけ？componentに紐づくものならcomponentにそのまま書くほうが凝集度高いよね

composableが『ただのオブジェクト』と違う点

// ただのオブジェクト
const counter = {
  count: 0,
  increment() { this.count++ }
}

// composable
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

普通のオブジェクトの場合、countを変えたことをvueが気づけないので、再描画されない

  • なるほど、Vueの「勝手に再描画してくれる」という利点を生かすなら、オブジェクトにしたらダメなのね

composableが必要な理由はなんとなくわかった？

Vueを使うならこういう文法が必要だってことね

じゃあ、良いcomposableってなんだろう

基本的にオブジェクト指向と同じ

  • 神composableは避けようね、とか
  • componentに紐づくものならcomponentにそのまま書く
  • そのcomposable内で完結させよう、完結できないなら引数として渡す

それ以外の注意点

  • Vueに依存する理由がある（ただの関数をcomposableにする意味がない）
  • onUnmountedでクリーンアップする
  • グローバルなものや永続化が必要なものはpiniaに任せる

あとがき

composable完璧に理解した