Vue の provide/inject について調べた

Vue に provide/inject という仕組みがあること自体は知っていたしなんとなくどういうものかも知っていたけど、実際使ったことはないしどのようにして使えばいいのかをちょっと考えたり調べたりした。

Provide / inject | Vue.js => コンポーネント全体の話のほう

Provide / Inject | Vue.js => Composition API の話のほう

最近 Vuex を脱却して Composition API の reactive や ref で state を管理しようという方向に動いていて、その場合は8/17で書いたようにuseXxxの内部で定義するか外部で定義するかで local/global のスコープが変わる。

ただ、実際にそうやっていくと、global に管理されている state がロジック置き場に散乱してしまう。ただロジック置き場の外に出ないという言い方もできそう。

こうなってくると、やはり state は親コンポーネントから props バケツリレーを行うほうが複雑化しにくいような気がするが、React では実際どんな感じでやっているんだろう(今書いているのは Vue なので分からない)

で、もし props バケツリレーで state を流すのであれば、provide/inject という仕組みが便利そうだった。

親コンポーネントで provide に渡したい値を指定すれば、受け取りたいコンポーネントで inject することで provide された値を受け取ることができる。

リアクティブな値の provide/inject

リアクティブな provide / inject の値を使う場合、リアクティブなプロパティに対しての変更は可能な限り 提供する側 の内部に留めることが推奨されます。

また、

データが注入されたコンポーネント側でデータを更新する必要がある場合もあります。そのような場合、リアクティブなプロパティを更新する責務を持つメソッドを提供することを推奨します。

とのこと。

リアクティブな値を渡す場合は普通にreactiveまたはrefで定義したものを渡せばいいとのことだけど、inject 側でリアクティブな値を更新するとよくないらしい。

よくないのはなんとなく感覚ではわかるんだけど、うまく言葉で説明できない……。余分な更新レンダリングが走るとかそういう感じだろうか……。

inject 側で provide された値を更新したい場合は、provide 側から「リアクティブな値を更新する責務を持つ関数」を追加で provide し、それも inject すればいいということになる。

また、inject 側からのリアクティブな値の更新を避けるため、provide するプロパティには readonly をつけたほうがいい。なるほど。

こう書くと、state とそれを更新する責務を持った関数(dispatch)を渡している感じがして Redux ぽく感じる。