{"id":14760,"date":"2025-03-10T11:45:14","date_gmt":"2025-03-10T08:45:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-jste-provide-inject-kullanimi-detayli-anlatim\/"},"modified":"2025-03-10T11:45:14","modified_gmt":"2025-03-10T08:45:14","slug":"vue-jste-provide-inject-kullanimi-detayli-anlatim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jste-provide-inject-kullanimi-detayli-anlatim\/","title":{"rendered":"Vue.js’te provide\/inject Kullan\u0131m\u0131: Detayl\u0131 Anlat\u0131m"},"content":{"rendered":"

Vue.js’te provide\/inject Kullan\u0131m\u0131: Detayl\u0131 Anlat\u0131m<\/p>\n

Merhaba, Fatih Soysal burada. Bu makalede, Vue.js’te bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir \u00f6zellik olan provide\/inject<\/code> ikilisini detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, prop drilling (\u00f6zellik delme) problemini a\u015fmak i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcm sunuyor.<\/p>\n

Prop Drilling Nedir ve Neden provide\/inject Kullanmal\u0131y\u0131z?<\/h2>\n

Prop drilling, verinin bir bile\u015fenden di\u011ferine, \u00fcst bile\u015fenlerden alt bile\u015fenlere do\u011fru, katman katman iletilmesi s\u00fcrecidir. Bu y\u00f6ntem, uygulaman\u0131n b\u00fcy\u00fcmesiyle birlikte karma\u015f\u0131kla\u015f\u0131r ve bak\u0131m\u0131 zorla\u015f\u0131r. Veri ak\u0131\u015f\u0131 takip edilmesi g\u00fc\u00e7le\u015fir, kodun okunabilirli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi azal\u0131r. \u0130\u015fte bu noktada provide\/inject<\/code> devreye girer. provide\/inject<\/code> ile, \u00fcst bile\u015fenler alt bile\u015fenlere verileri do\u011frudan, herhangi bir ara bile\u015fen olmadan sa\u011flayabilir.<\/p>\n

provide\/inject Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

provide<\/code> y\u00f6ntemi, bir bile\u015fen i\u00e7inde veri sa\u011flar. Bu veri, alt bile\u015fenler taraf\u0131ndan inject<\/code> y\u00f6ntemi ile eri\u015filebilir. D\u00fc\u015f\u00fcnsenize, \u00fcst bile\u015fen bir su kayna\u011f\u0131, provide<\/code> ise bu kaynaktan su sa\u011flama eylemi, alt bile\u015fenler ise bu suyu kullanan evler, inject<\/code> ise suyu almak i\u00e7in kulland\u0131klar\u0131 musluk g\u00f6revi g\u00f6r\u00fcyor. Basit ve anla\u015f\u0131l\u0131r, de\u011fil mi?<\/p>\n

\u00d6rne\u011fin, bir uygulamada oturum a\u00e7m\u0131\u015f kullan\u0131c\u0131n\u0131n bilgilerini t\u00fcm uygulama boyunca eri\u015filebilir k\u0131lmak isteyebilirsiniz. Bu bilgiyi bir \u00fcst bile\u015fende provide<\/code> ile sa\u011flayabilir ve alt bile\u015fenlerde inject<\/code> ile kullanabilirsiniz. B\u00f6ylece, her bile\u015fene tek tek prop olarak ge\u00e7irmek zorunda kalmazs\u0131n\u0131z.<\/p>\n

Kod \u00d6rne\u011fi<\/h2>\n

\u0130\u015fte basit bir provide\/inject<\/code> \u00f6rne\u011fi:<\/p>\n

\n<template>\n  <div>\n    <MyComponent \/>\n  <\/div>\n<\/template>\n\n<script>\nimport MyComponent from '.\/MyComponent.vue';\n\nexport default {\n  name: 'AppComponent',\n  components: {\n    MyComponent\n  },\n  provide() {\n    return {\n      userName: 'Fatih Soysal'\n    };\n  }\n};\n<\/script>\n<\/code><\/pre>\n
\n<template>\n  <div>Kullan\u0131c\u0131 Ad\u0131: {{ userName }}<\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'MyComponent',\n  inject: ['userName']\n};\n<\/script>\n<\/code><\/pre>\n
Bu \u00f6rnekte, AppComponent<\/code>, userName<\/code> verisini provide<\/code> ile sa\u011flar.  MyComponent<\/code> ise inject<\/code> ile bu veriye eri\u015fir ve g\u00f6r\u00fcnt\u00fcler.  Sonu\u00e7 olarak,  MyComponent<\/code>,  AppComponent<\/code>‘ten herhangi bir prop almadan userName<\/code> bilgisine ula\u015f\u0131r.<\/p>\n
\u00d6nemli Notlar<\/h2>\n
provide\/inject<\/code> kullan\u0131rken dikkat edilmesi gereken birka\u00e7 nokta var.  \u00d6ncelikle,  bu y\u00f6ntemin a\u015f\u0131r\u0131 kullan\u0131m\u0131 kodun okunabilirli\u011fini olumsuz etkileyebilir.  Yani, her veri i\u00e7in provide\/inject<\/code> kullanmak yerine, ihtiya\u00e7 duyulan durumlarda kullanmak daha sa\u011fl\u0131kl\u0131 bir yakla\u015f\u0131md\u0131r.  Ayr\u0131ca,  daha karma\u015f\u0131k senaryolar i\u00e7in, Vuex gibi bir durum y\u00f6netim k\u00fct\u00fcphanesi kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz.  Kendi web sitemde<\/a> Vuex hakk\u0131nda daha fazla bilgi bulabilirsiniz. <\/p>\n
Umar\u0131m bu makale, Vue.js’te provide\/inject<\/code> kullan\u0131m\u0131n\u0131 anlaman\u0131za yard\u0131mc\u0131 olmu\u015ftur.  Herhangi bir sorunuz varsa, l\u00fctfen yorum yapmaktan \u00e7ekinmeyin.<\/p>\n
Faydal\u0131 bulabilece\u011finiz ek kaynaklar:<\/p>\n