પ્રોવાઇડ / ઇન્જેક્ટ (Provide / Inject) ​

આ પેજ ધારે છે કે તમે પહેલાથી જ કમ્પોનન્ટ્સના મૂળભૂત પાસાઓ વાંચી લીધું છે. જો તમે કમ્પોનન્ટ્સ માટે નવા હોવ તો પહેલા તે વાંચો.

પ્રોપ ડ્રિલિંગ (Prop Drilling) ​

સામાન્ય રીતે, જ્યારે આપણે પેરેન્ટમાંથી ચાઇલ્ડ કમ્પોનન્ટમાં ડેટા પાસ કરવાની જરૂર હોય છે, ત્યારે આપણે પ્રોપ્સ નો ઉપયોગ કરીએ છીએ. જો કે, કલ્પના કરો કે આપણી પાસે એક મોટું કમ્પોનન્ટ ટ્રી છે, અને ખૂબ જ ઊંડા નેસ્ટેડ (deeply nested) ઘટકને દૂરના પૂર્વજ (ancestor) ઘટક પાસેથી કંઈક જોઈએ છે. માત્ર પ્રોપ્સ સાથે, આપણે આખી પેરેન્ટ ચેઇનમાં સમાન પ્રોપ પાસ કરવી પડશે:

નોંધ કરો કે જોકે <Footer> કમ્પોનન્ટને આ પ્રોપ્સની બિલકુલ પરવા ન હોય, છતાં પણ તેણે તેને જાહેર કરવી પડશે અને આગળ પસાર કરવી પડશે જેથી <DeepChild> તેને એક્સેસ કરી શકે. જો લાંબી પેરેન્ટ ચેઇન હોય, તો રસ્તામાં વધુ ઘટકો પ્રભાવિત થશે. આને "પ્રોપ્સ ડ્રિલિંગ (props drilling)" કહેવામાં આવે છે અને તેની સાથે વ્યવહાર કરવામાં ચોક્કસપણે મજા આવતી નથી.

અમે provide અને inject સાથે પ્રોપ્સ ડ્રિલિંગને ઉકેલી શકીએ છીએ. પેરેન્ટ કમ્પોનન્ટ તેના તમામ વંશજો (descendants) માટે ડિપેન્ડન્સી પ્રોવાઇડર (dependency provider) તરીકે સેવા આપી શકે છે. વંશજ ટ્રીમાંનો કોઈપણ ઘટક, તે ગમે તેટલો ઊંડો હોય, તેના પેરેન્ટ ચેઇનમાં ઉપરના ઘટકો દ્વારા પૂરી પાડવામાં આવેલી ડિપેન્ડન્સીસને ઇન્જેક્ટ (inject) કરી શકે છે.

પ્રોવાઇડ (Provide) ​

<script setup>
import { provide } from 'vue'

provide(/* key */ 'message', /* value */ 'હેલો!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* key */ 'message', /* value */ 'હેલો!')
  }
}

import { ref, provide } from 'vue'

const count = ref(0)
provide('key', count)

export default {
  provide: {
    message: 'હેલો!'
  }
}

export default {
  data() {
    return {
      message: 'હેલો!'
    }
  },
  provide() {
    // ફંક્શન સિન્ટેક્સનો ઉપયોગ કરો જેથી કરીને આપણે `this` ને એક્સેસ કરી શકીએ
    return {
      message: this.message
    }
  }
}

એપ-લેવલ પ્રોવાઇડ (App-level Provide) ​

કમ્પોનન્ટમાં ડેટા પૂરો પાડવા ઉપરાંત, આપણે એપ લેવલ પર પણ પ્રોવાઇડ કરી શકીએ છીએ:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* key */ 'message', /* value */ 'હેલો!')

એપ-લેવલ પ્રોવાઇડ્સ એપમાં રેન્ડર થયેલા તમામ ઘટકો માટે ઉપલબ્ધ છે. પ્લગિન્સ લખતી વખતે આ ખાસ કરીને ઉપયોગી છે, કારણ કે પ્લગિન્સ સામાન્ય રીતે કમ્પોનન્ટ્સનો ઉપયોગ કરીને વેલ્યુસ પૂરી પાડી શકતા નથી.

ઇન્જેક્ટ (Inject) ​

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // ઇન્જેક્ટ કરેલી વેલ્યુ
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // ઇન્જેક્ટ કરેલી વેલ્યુ પર આધારિત પ્રારંભિક ડેટા
      fullMessage: this.message
    }
  }
}

export default {
  inject: {
    /* લોકલ કી */ localMessage: {
      from: /* ઇન્જેક્શન કી */ 'message'
    }
  }
}

ઇન્જેક્શન ડિફોલ્ટ વેલ્યુસ (Injection Default Values) ​

ડિફોલ્ટ રૂપે, inject ધારે છે કે ઇન્જેક્ટ કરેલી કી પેરેન્ટ ચેઇનમાં ક્યાંક પૂરી પાડવામાં આવી છે. જો કી પૂરી પાડવામાં ન આવી હોય, તો રનટાઇમ વોર્નિંગ આવશે.

જો આપણે ઇન્જેક્ટ કરેલી પ્રોપર્ટીને વૈકલ્પિક (optional) પ્રોવાઇડર્સ સાથે કામ કરવા ઈચ્છીએ છીએ, તો આપણે પ્રોપ્સની જેમ જ ડિફોલ્ટ વેલ્યુ જાહેર કરવાની જરૂર છે:

// જો "message" સાથે મેળ ખાતો કોઈ ડેટા પૂરો પાડવામાં આવ્યો નથી
// તો `value` એ "ડિફોલ્ટ વેલ્યુ" હશે
const value = inject('message', 'ડિફોલ્ટ વેલ્યુ')

const value = inject('key', () => new ExpensiveClass(), true)

export default {
  // ઇન્જેક્શન માટે ડિફોલ્ટ વેલ્યુ જાહેર કરતી વખતે
  // ઓબ્જેક્ટ સિન્ટેક્સ જરૂરી છે
  inject: {
    message: {
      from: 'message', // જો ઇન્જેક્શન માટે સમાન કીનો ઉપયોગ કરતા હોય તો આ વૈકલ્પિક છે
      default: 'ડિફોલ્ટ વેલ્યુ'
    },
    user: {
      // નોન-પ્રિમિટિવ વેલ્યુસ માટે ફેક્ટરી ફંક્શનનો ઉપયોગ કરો જે બનાવવી મોંઘી હોય,
      // અથવા તે જે કમ્પોનન્ટ ઇન્સ્ટન્સ દીઠ અનન્ય હોવી જોઈએ.
      default: () => ({ name: 'John' })
    }
  }
}

રિએક્ટિવિટી સાથે કામ કરવું (Working with Reactivity) ​

<!-- પ્રોવાઇડર કમ્પોનન્ટની અંદર -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('ઉત્તર ધ્રુવ')

function updateLocation() {
  location.value = 'દક્ષિણ ધ્રુવ'
}

provide('location', {
  location,
  updateLocation
})
</script>

<!-- ઇન્જેક્ટર કમ્પોનન્ટમાં -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'હેલો!'
    }
  },
  provide() {
    return {
      // સ્પષ્ટપણે કમ્પ્યુટેડ પ્રોપર્ટી પ્રદાન કરો
      message: computed(() => this.message)
    }
  }
}

સિમ્બોલ કીઝ સાથે કામ કરવું (Working with Symbol Keys) ​

અત્યાર સુધી, અમે ઉદાહરણોમાં સ્ટ્રિંગ ઇન્જેક્શન કીનો ઉપયોગ કરી રહ્યા છીએ. જો તમે ઘણા ડિપેન્ડન્સી પ્રોવાઇડર્સ સાથે મોટી એપ્લિકેશનમાં કામ કરી રહ્યા છો, અથવા તમે એવા કમ્પોનન્ટ્સ બનાવી રહ્યા છો જે અન્ય ડેવલપર્સ દ્વારા ઉપયોગમાં લેવા જઈ રહ્યા છે, તો સંભવિત અથડામણ (collisions) ટાળવા માટે Symbol ઇન્જેક્શન કીનો ઉપયોગ કરવો શ્રેષ્ઠ છે.

એક સમર્પિત ફાઇલમાં સિમ્બોલ્સ એક્સપોર્ટ કરવાની ભલામણ કરવામાં આવે છે:

export const myInjectionKey = Symbol()

// પ્રોવાઇડર કમ્પોનન્ટમાં
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* પ્રોવાઇડ કરવા માટેનો ડેટા */
})

// ઇન્જેક્ટર કમ્પોનન્ટમાં
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

// પ્રોવાઇડર કમ્પોનન્ટમાં
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* પ્રોવાઇડ કરવા માટેનો ડેટા */
      }
    }
  }
}

// ઇન્જેક્ટર કમ્પોનન્ટમાં
import { myInjectionKey } from './keys.js'

export default {
  inject: {
    injected: { from: myInjectionKey }
  }
}