Provide/Inject (Provide/Inject)
«Provide/Inject» یعنی «اشتراک داده» بین کامپوننت ها بدون عبور دادن «پراپ (Prop)». مثل دفتر مشترک کلاس که همه می بینند؛ معلم می گذارد، شاگردها برمی دارند.
اشتراک داده با Provide/Inject چیست؟
در پروژه بزرگ، عبور دادن پراپ از چند لایه سخت است. با Provide/Inject فقط جای آغاز و جای دریافت را تنظیم می کنیم. بقیه مسیر ساده می شود.
Provide: داده را در دسترس بگذار
در ریشه یا هر کامپوننت، با provide() داده را عمومی می کنی. سپس فرزندها می توانند آن را تزریق کنند.
<template>
<h1>Food</h1>
<div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
<div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
<div id="divComp">
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: 'food-about',
foods: [
{ name: 'Pizza', imgUrl: '/img_pizza.svg' },
{ name: 'Apple', imgUrl: '/img_apple.svg' },
{ name: 'Cake', imgUrl: '/img_cake.svg' },
{ name: 'Fish', imgUrl: '/img_fish.svg' },
{ name: 'Rice', imgUrl: '/img_rice.svg' }
]
};
},
provide() {
return {
foods: this.foods
};
}
};
<\/script>
Inject: داده را بگیر و استفاده کن
در فرزند، با inject همان کلید را می گیری. سپس مثل داده خودت استفاده می کنی.
<template>
<h2>Different Kinds of Food</h2>
<p><mark>Data is provided in App.vue and injected here.</mark></p>
<div v-for="x in foods">
<img :src="x.imgUrl">
<p class="pName">{{ x.name }}</p>
</div>
</template>
<script>
export default {
inject: [
'foods'
]
};
<\/script>
<style scoped>
div {
margin: 10px;
padding: 10px;
display: inline-block;
width: 80px;
background-color: #28e49f47;
border-radius: 10px;
}
.pName {
text-align: center;
}
img {
width: 100%;
}
<\/style>
گام های عملی
- داده مشترک را در ریشه تعریف و
provide()کن. - در فرزند، کلیدها را با
injectبگیر. - نمایش را با
v-forیا بایندینگ انجام بده.
نکته: برای حالت های پیچیده، این الگو ساده است؛ اما برای مدیریت گسترده حالت، بهتر است معماری وضعیت جداگانه داشته باشی.
جمع بندی سریع
- Provide می گذارد؛ Inject برمی دارد.
- دیگر نیازی به زنجیره پراپ نیست.
- کلیدهای یکسان را استفاده کن.
- برای داده زیاد، سراغ مدیریت وضعیت برو.