Provide / Inject ​

এই পৃষ্ঠাটি ধরে নেওয়া হচ্ছে আপনি ইতিমধ্যেই Components Basics পড়েছেন। আপনি যদি কম্পোনেন্টগুলিতে নতুন হন তবে প্রথমে এটি পড়ুন।

Prop Drilling ​

সাধারণত, যখন আমাদের পিতামাতার কাছ থেকে একটি চাইল্ড কম্পোনেন্টে ডেটা পাঠানোর প্রয়োজন হয়, আমরা props ব্যবহার করি। যাইহোক, সেই ক্ষেত্রে কল্পনা করুন যেখানে আমাদের একটি বড় কম্পোনেন্ট গাছ রয়েছে এবং একটি গভীরভাবে নেস্টেড কম্পোনেন্টটির জন্য একটি দূরবর্তী পূর্বপুরুষ কম্পোনেন্ট থেকে কিছু প্রয়োজন। শুধুমাত্র প্রপস সহ, আমাদের পুরো প্যারেন্ট চেইন জুড়ে একই প্রপ পাস করতে হবে:

লক্ষ্য করুন যদিও <Footer> কম্পোনেন্টটি এই প্রপসগুলিকে মোটেও গুরুত্ব নাও দিতে পারে, তবুও এটিকে ঘোষণা করতে হবে এবং পাস করতে হবে যাতে <DeepChild> সেগুলি অ্যাক্সেস করতে পারে। যদি একটি দীর্ঘ অভিভাবক শৃঙ্খল থাকে, তবে আরও কম্পোনেন্টগুলি পথে প্রভাবিত হবে। এটিকে "প্রপস ড্রিলিং" বলা হয় এবং এটি মোকাবেলা করা অবশ্যই মজাদার নয়।

আমরা provide এবং inject দিয়ে প্রপস ড্রিলিং সমাধান করতে পারি। একটি অভিভাবক কম্পোনেন্ট তার সমস্ত বংশধরদের জন্য নির্ভরতা প্রদানকারী হিসেবে কাজ করতে পারে। বংশধর গাছের যেকোনো কম্পোনেন্ট, তা যতই গভীর হোক না কেন, inject করতে পারে তার মূল শৃঙ্খলে থাকা কম্পোনেন্টগুলির দ্বারা প্রদত্ত নির্ভরতা।

Provide ​

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

provide(/* key */ 'message', /* value */ 'hello!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* key */ 'message', /* value */ 'hello!')
  }
}

import { ref, provide } from 'vue'

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

export default {
  provide: {
    message: 'hello!'
  }
}

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    // use function syntax so that we can access `this`
    return {
      message: this.message
    }
  }
}

App-level Provide ​

একটি কম্পোনেন্টে ডেটা প্রদানের পাশাপাশি, আমরা অ্যাপ স্তরেও প্রদান করতে পারি:

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* key */ 'message', /* value */ 'hello!')

অ্যাপ-স্তরের প্রদানগুলি অ্যাপে রেন্ডার করা সমস্ত কম্পোনেন্টের জন্য উপলব্ধ। plugins লেখার সময় এটি বিশেষভাবে উপযোগী, কারণ প্লাগইনগুলি সাধারণত কম্পোনেন্ট ব্যবহার করে মান প্রদান করতে সক্ষম হয় না।

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) // injected value
  }
}

export default {
  inject: ['message'],
  data() {
    return {
      // initial data based on injected value
      fullMessage: this.message
    }
  }
}

export default {
  inject: {
    /* local key */ localMessage: {
      from: /* injection key */ 'message'
    }
  }
}

Injection Default Values ​

ডিফল্টরূপে, inject অনুমান করে যে ইনজেকশন করা কীটি প্যারেন্ট চেইনের কোথাও সরবরাহ করা হয়েছে। যে ক্ষেত্রে কী প্রদান করা হয়নি, সেখানে একটি রানটাইম সতর্কতা থাকবে।

যদি আমরা ঐচ্ছিক প্রদানকারীদের সাথে একটি ইনজেকশনযুক্ত কম্পিউটেড প্রপার্টি কাজ করতে চাই, তাহলে আমাদের প্রপসের মতো একটি ডিফল্ট মান ঘোষণা করতে হবে:

// `value` will be "default value"
// if no data matching "message" was provided
const value = inject('message', 'default value')

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

export default {
  // object syntax is required
  // when declaring default values for injections
  inject: {
    message: {
      from: 'message', // this is optional if using the same key for injection
      default: 'default value'
    },
    user: {
      // use a factory function for non-primitive values that are expensive
      // to create, or ones that should be unique per component instance.
      default: () => ({ name: 'John' })
    }
  }
}

Working with Reactivity ​

<!-- inside provider component -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

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

<!-- in injector component -->
<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: 'hello!'
    }
  },
  provide() {
    return {
      // explicitly provide a computed property
      message: computed(() => this.message)
    }
  }
}

Working with Symbol Keys ​

এখন পর্যন্ত, আমরা উদাহরণগুলিতে স্ট্রিং ইনজেকশন কী ব্যবহার করে আসছি। আপনি যদি অনেক নির্ভরতা প্রদানকারীর সাথে একটি বড় অ্যাপ্লিকেশনে কাজ করেন, বা আপনি অন্যান্য ডেভেলপমেন্টকারীদের দ্বারা ব্যবহৃত কম্পোনেন্টগুলি রচনা করছেন, তাহলে সম্ভাব্য সংঘর্ষ এড়াতে সিম্বল ইনজেকশন কীগুলি ব্যবহার করা ভাল।

একটি ডেডিকেটেড ফাইলে প্রতীকগুলি রপ্তানি করার পরামর্শ দেওয়া হচ্ছে:

// keys.js
export const myInjectionKey = Symbol()

// in provider component
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* data to provide */
})

// in injector component
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

// in provider component
import { myInjectionKey } from './keys.js'

export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* data to provide */
      }
    }
  }
}

// in injector component
import { myInjectionKey } from './keys.js'

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