なんかいろいろと書いてくブログ

関東のどこかで働く、一般人

【Vue.js】Provide / Inject

Vue.js

NuxtでComponentでの親→子間データのやり取りではpropsで十分だと思ってたけど Componentsが増えてきて、prop地獄になりつつあったので
地獄の回避するためにpropProvide / Injectついて調べる

↓は誤字って投稿したTweet

公式ドキュメント

こんな記事読むより、公式読んだほうが確実！

v3.ja.vuejs.org

Provide / injectについて

親からすべての子Componentsへ値を伝播させたいとき使用するとよいみたい

そのような場合は、provide と inject のペアを利用できます。コンポーネント階層の深さに関係なく、親コンポーネントは、そのすべての子階層へ依存関係を提供するプロバイダとして機能することができます。この機能は 2 つの機能からなります: 親コンポーネントは、データを提供するためのオプション provide を持ち、子コンポーネントはそのデータを利用するためのオプション inject を持っています。

真面目に検証していないが、下記のように各ようだ
(私はVue.extendでTypeScriptで書く派)

親Component

<script lang="ts">
import Vue from 'vue'

type Datatype = {
  data : string
}

export default Vue.extend({
  data () : DataType {
    return {
      data: ""
    }
  },
   provide: {
    propsData: this.data  // 子Componentに伝播したい値 
  }
})
</script>

子Component

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
   inject: ['user'] // injectで定義するとthisでアクセスできるようだ
})
</script>

どこで使いそうか

下記記事でざっくり書いたが、
Nuxt × TypeScriptにおける型セーフなコンポーネント設計を考える - Qiita
私はVueでのComponent設計としてAtomic Designを使用しており、
ルールとして、OrganismsでのみサーバーとのAPIを使用している
こうすることで、すっきりとしたComponent設計になると予想していたが、
APIの取得した結果に対して、再度APIリクエストをする場合
(例えば一覧をAPIからもらって、行を押下したら詳細を取得するAPIリクエストを送るときとか )
Organismsに対して、Organismsの参照をするので
Componentの階層が深くなり、propsによるバケツリレーというう名のprops地獄が発生している

ので、Organismsから取得した結果はprovideで定義して、どこでも使えるようようにしてあげれば
props地獄も少し楽になるのではと思う
(その場合、propsとの使い分けで泣きを見そうな気がするが、)