🎃

第2回 フロントエンドアーキテクチャを学ぶ

2021/11/09に公開約1,100字

読んだ記事

Vue3 Composition APIにおいて、Providerパターン(provide/inject)の使い方と、なぜ重要なのか、理解する。
今回の記事は若干アーキテクチャからは離れるが、関心としては近しきものがあるため許容する。

内容の自分的解釈

Vue3からはとにかくprovide/inject。
provide/Injectは簡単に言えば、「Composition apiで切り出した状態/ロジックをコンポーネント間で共有すること」

provide: Object | () => Object
inject: Array | {[key:string] | Symbol | Object}

上記のようなもの。

まず前提として、composition apiでは

  • 状態
  • ロジック

の2つを切り出すことが可能である。
そのおかげでcomposition apiを使えばコンポーネントではstateへの変更をcomposableで実行できる。
composition apiはstateとロジックを上記で記載した通り切り出せる一方、複数コンポーネントで状態を共有できない。
グローバルな変数としてstateを持たない場合、各コンポーネントでcomposableをimportするとそれぞれにインスタンスが作られるようなイメージで、stateが共有されたものでなくなってしまう。
ここで出てくるのがprovide/inject。
provide/injectでコンポーネント間でstateを同様のものとして共有させることができる。
propsも不要となり、無意味なバケツリレーも発生しなくなる。
(具体例は記事を参照。)

感想

恥ずかしながら知識として持っていなかったので反省。  
そして下記の記事もこれに伴って気になった。
Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか?
Composition apiをstoreとして使用するに当たってはprovide/indjectは必須になるなと思った。
そもそもの前提として、composition apiにおける実装パターンを知れていないのはかなり痛いと思った。

Discussion

ログインするとコメントできます