Provide / Inject ​

در این صفحه فرض شده که شما از قبل مبانی کامپوننت‌ها را مطالعه کرده اید. اگر با کامپوننت‌ها آشنایی ندارید، ابتدا آن را بخوانید.

انتقال پراپ به اعماق درخت کامپوننت‌ها - Prop Drilling ​

معمولاً وقتی می‌خواهیم داده‌ای را از والد به فرزند منتقل کنیم، از props استفاده می‌کنیم. اما حالتی را تصور کنید که کامپوننت‌های تو در توی زیادی داریم و یک کامپوننت در عمق درخت نیاز به داده‌ای از یک کامپوننت اجدادی با فاصله زیاد دارد. در این حالت، با استفاده از props باید همان پراپ را در تمام مسیر بین کامپوننت‌ها انتقال دهیم:

ملاحظه می‌کنید اگرچه کامپوننت <Footer> شاید نیازی به این پراپ‌ها ندارد، ولی باز هم باید آن‌ها را تعریف و منتقل کند تا <DeepChild> بتواند به آن‌ها دسترسی داشته باشد. اگر زنجیره والدین‌ها طولانی‌تر باشد، کامپوننت‌های بیشتری در مسیر تاثیر می‌گیرند. این موضوع را "props drilling" (انتقال پراپ به اعماق درخت کامپوننت‌ها) می‌نامند و حتماً کار لذت‌بخشی نیست.

می‌توانیم با استفاده از provide و inject این مشکل را حل کنیم. کامپوننت والد می‌تواند به عنوان یک ارائه‌دهنده dependencyها برای تمام فرزندانش عمل کند. هر کامپوننتی در درخت فرزندان، صرف‌نظر از عمق آن، می‌تواند dependencyهای ارائه شده توسط کامپوننت‌های بالاتر در زنجیره والدین را تزریق (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() {
    // دسترسی داشته باشیم `this` از سینتکس تابع استفاده می‌کنیم تا به
    return {
      message: this.message
    }
  }
}

ارائه در سطح اپلیکیشن - App-level Provide ​

علاوه بر ارائه دادن داده در یک کامپوننت، می‌توانیم در سطح اپلیکیشن هم داده را ارائه دهیم:

import { createApp } from 'vue'

const app = createApp({})

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

ارائه‌های سطح اپلیکیشن برای تمام کامپوننت‌های رندر شده در اپلیکیشن قابل دسترسی هستند. این مورد به خصوص زمانی مفید است که پلاگین‌ها را می‌نویسیم، چرا که پلاگین‌ها معمولاً قادر نیستند از طریق کامپوننت‌ها مقادیری را ارائه کنند.

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: {
    /* local key */ localMessage: {
      from: /* injection key */ 'message'
    }
  }
}

Injection Default Values ​

به طور پیش‌فرض، inject فرض می‌کند injection key در جایی در زنجیره والدین ارائه شده است. در صورتی که کلید ارائه نشده باشد، یک هشدار در زمان اجرا نمایش داده می‌شود.

اگر می‌خواهیم یک پراپرتی تزریق شده با optional provider ها کار کند، نیاز است مقدار پیش‌فرضی را مشابه props تعریف کنیم:

// خواهد بود "default value" مقدار `value`
// ارائه نشده باشد "message" اگر هیچ داده‌ای با کلید
const value = inject('message', 'default value')

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

export default {
  // سینتکس آبجکت الزامی است
  // هنگام تعریف مقادیر پیش‌فرض برای تزریق‌ها
  inject: {
    message: {
      from: 'message', // اختیاری است اگر همان کلید تزریق استفاده شود
      default: 'default value'
    },
    user: {
      // non-primitive برای مقادیر factory function از
      // یا مواردی که باید برای هر کامپوننت منحصربفرد باشند، استفاده کنید
      default: () => ({ name: 'John' })
    }
  }
}

کار با Reactive ​

<!-- 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)
    }
  }
}

کار با کلیدهای Symbol ​

تا اینجا، در مثال‌ها از کلیدهای رشته‌ای برای تزریق داده استفاده کرده‌ایم. اگر در یک برنامه بزرگ با بسیاری ارائه‌دهنده‌های وابستگی کار می‌کنید، یا قصد دارید کامپوننت‌هایی بنویسید که توسط سایر توسعه‌دهندگان استفاده خواهند شد، بهتر است از کلیدهای تزریق Symbol برای جلوگیری از برخورد احتمالی استفاده کنید.

توصیه می‌شود Symbolsها را در یک فایل جداگانه export کنید:

// 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 }
  }
}