provide/injectでreactiveな値を渡したいときは関数を渡す

composition-apiにreactiveな引数を渡したいときは関数で渡すというのを前回書いたのが前回。
https://zenn.dev/miyanokomiya/articles/811e0127779cf1

そしてprovide/injectでreactiveな値を渡したいときも同じような状況だったというのが今回。

provide/injectでreactiveな値を渡したいときにも

公式docにもあるような普通の方法だとこうなる。

Parent.vue

setup() {
  const count = ref(0)
  provide('count', count)
}

Child.vue

setup() {
  const count = inject<Ref<number>>('count')
}

Child.vue側ではRef<number>としなければならない。しかし前回のcompositionな場合と同様、使う側はinjectしたものがRefかComputedかはたまたreactiveなobjectかなんてことに関心は持ちたくない。provide下側も渡したrefを勝手に変更されてしまうことを予期していない可能性が高い。

ということでこうする。

Parent.vue

setup() {
  const count = ref(0)
  provide('getCount', () => count.value)
}

Child.vue

setup() {
  const getCount = inject<() => number>('getCount')
}

injectした側は常にgetterとして扱うことができ、それをcomputedだろうとwatchだろうと好きな場所で利用することができる。

単一のsetupスコープに閉じない値の受け渡しをする場合は常に関数を渡しておくのがcomposition-apiの勘所かもしれない。