Vue.js’ten C# REST API’ye Veri Gönderme: Dynamic Components ve keep-alive Kullanımı

Vay be, ne günlerdi! Aklıma geldi şimdi, bundan birkaç yıl önce Vue.js ile bir proje yapıyordum. Frontend’i tıkır tıkır çalışıyor, her şey süper gidiyordu. Sonra bir baktım ki, benim o çok sevdiğim Vue component’lerim, sayfa değişince sanki hiç var olmamış gibi davranmaya başladı. Yani, o anki heyecanım yerini ufak bir paniğe bırakmıştı resmen. Ne yapacağım şimdi ben bu durumu diye düşünürken, aklıma yapay zeka gibi bir şey geldi: acaba Vue’nun bu component’leri hafızada tutma gibi bir özelliği var mıdır? Sonra dedim ki, dur bakalım, bu işin bir kolayı olmalı.

İşte tam o noktada Dynamic Components ve keep-alive ile tanıştım. Aslında ilk başta kulağa biraz karmaşık gelse de, olayın özü oldukça basitmiş. Şöyle düşünün, bir ev yaptınız ve içine çok güzel eşyalar aldınız. Bu eşyalar sizin component’leriniz. Eğer her seferinde eve yeni girmiş gibi her şeyi sıfırdan kurmak yerine, bazı eşyaları olduğu gibi bırakıp sadece lazım olanları kullanabiliyor olsanız ne kadar pratik olurdu, değil mi? İşte keep-alive de tam olarak bu işe yarıyor. Yani component’lerinizi hafızada tutuyor, sayfa yenilendiğinde veya başka bir component’e geçildiğinde onları yeniden oluşturmak yerine, sanki hiç gitmemişler gibi orada bekletiyor.

Bu arada, Bursa’da yaşarken zaman zaman ailecek şehir turlarına çıkıyoruz, biliyorsunuz. Geçenlerde bir gezi sırasında, bir müzeyi geziyorduk ve içerideki eserler inanılmazdı. Rehberimiz anlatırken, bazı eserlerin zaman içinde nasıl korunduğunu, sanki dün yapılmış gibi durduğunu söyledi. İşte keep-alive de o eserler gibi, component’lerimizi zamanın etkisinden koruyup ilk halleriyle saklıyor sanki. 🙂 Ne güzel değil mi?

Şimdi gelelim dynamic components’lere. Bunlar da aslında bizim seçtiğimiz component’leri dinamik olarak yüklememizi sağlıyor. Hani bazen bir butona tıklayınca ekrana bir şeyin gelmesi gerekir ya, işte o zaman dynamic component’ler devreye giriyor. Yani, ihtiyacımız olduğunda yükleniyor, işi bitince ortadan kayboluyor. Bu da uygulamamızın daha hızlı yüklenmesini sağlıyor, çünkü her şeyi en başta yüklemek yerine, sadece gerekenleri talep ediyorsunuz. Bu arada, kendi yazdığım bir C# REST API’si ile uğraşırken de benzer bir mantık kullanmıştım. Frontend’den gelen isteklere göre backend’de hangi servisi çalıştıracağımı dinamik olarak belirliyordum. Bu sayede hem daha esnek hem de daha performanslı bir yapı kurmuştum.

Peki, bu ikisini nasıl bir araya getireceğiz? Vue’da bunun için özel bir `` component’i var. Bu component’in içine dynamic olarak yüklediğimiz component’leri koyuyoruz. Böylece hem dinamik olarak yükleme yapabiliyoruz hem de yüklediğimiz component’lerin durumunu kaybetmeden saklayabiliyoruz. Mesela, bir kullanıcı profili sayfası düşünün. Kullanıcının bilgilerini doldurdunuz, sonra başka bir sayfaya geçtiniz ve tekrar profil sayfasına döndüğünüzde, doldurduğunuz bilgilerin durması harika olmaz mıydı? İşte keep-alive bunu sağlıyor.

Normalde, bir component DOM’dan kaldırıldığında yok olur gider. Ama `` ile bu component’ler bir cache’te tutulur. Yani siz başka bir yere gitseniz bile, o component orada bekler, bilgileriyle birlikte. Sonra geri döndüğünüzde hemen karşınıza çıkar.

Aslında biraz da şu şekilde oluyor: Bir nevi component’lerinizin fotoğrafını çekip saklıyorsunuz. Sonra geri geldiğinizde o fotoğrafı gösteriyorsunuz. Sıfırdan çizmek yerine.

Şimdi gelelim işin kod kısmına. Diyelim ki Vue.js’ten bir C# REST API’sine veri göndereceğiz ve bunu yaparken dynamic component’lerle, keep-alive’ı kullanacağız. Bu durumda, öncelikle Vue tarafında bir component’imizi dinamik olarak yüklememiz gerekiyor. Sonra da bu component içinden bir HTTP isteği ile backend’imize, yani C# API’mize verileri göndereceğiz. Hani ben bazen web servisleri geliştirirken de aynı mantığı izlerim, frontend’den gelen veriyi alıp işlemek gibi.

Örnek olarak, kullanıcıların bir form doldurduğunu ve bu bilgilerin bir C# backend’ine kaydedildiğini düşünelim. Vue tarafında bu dinamik component’i ve keep-alive’ı kullanarak, kullanıcının formu doldurduktan sonra başka sayfalara gitse bile bilgilerinin kaybolmadığından emin olabiliriz. Sonra da, o component içinden bir butona tıklayarak veya belirli bir event tetiklendiğinde bu bilgileri API’ye gönderebiliriz.

Bu arada, ben kendi programlarımda da böyle durumlarla karşılaştığımda, hemen bir kod örneği üzerinden deneme yanılma yaparım. Geçenlerde bir bug yakalamıştım, bir türlü çözemiyordum. Sonra dedim ki, dur şuradan bir örnek kod bulup uygulayayım. Ve evet, işe yaradı! 🙂 İşte bu dynamic component ve keep-alive olayı da biraz öyle. Önce bir mantığını kavrıyorsun, sonra kodunu yazıp deniyorsun.

Şimdi gelelim koda. Diyelim ki bir formumuz var ve bu formdaki veriyi göndereceğiz. İlk başta, belki de bir hata yapıp bilgileri doğru şekilde saklayamayız veya dinamik yüklemeyi yanlış yapabiliriz. Ama sonra, doğru yolu bulduğumuzda işler çok daha kolaylaşır. Yani, önce bir şeyleri yanlış yapıyoruz, sonra doğrusunu öğreniyoruz. Bu hayatta da böyledir, kodlamada da.

Şu kod örneğine bir bakalım:

// YANLIŞ YAPI (Sadece bilgi gönderme, component durumu kayboluyor)

<template>   <div>     <input v-model="userData.name" placeholder="Adınız">     <button @click="submitForm">Gönder</button>   </div> </template> <script> export default {   data() {     return {       userData: { name: '' }     };   },   methods: {     async submitForm() {       // Burada API çağrısı olacak ama component yok olduğu için bilgiler kaybolacak       console.log('Gönderilen Veri:', this.userData.name);       // await fetch('/api/users', { method: 'POST', body: JSON.stringify(this.userData) });     }   } } </script>

Yukarıdaki örnekte, eğer bu component DOM’dan kaldırılırsa, `userData.name` içindeki bilgi kaybolur. Yani, siz bir sayfadan diğerine geçip geri geldiğinizde, input boş görünür. Pek kullanışlı değil, değil mi?

Şimdi de bunu keep-alive ve dynamic component ile daha mantıklı hale getirelim. Tabii burada dynamic component’i doğrudan göstermek biraz uzun sürebilir ama keep-alive ile nasıl saklandığını ve sonrasında veriyi API’ye nasıl gönderebileceğimizi görelim:

// DOĞRU YAPI (keep-alive ile component’i saklama ve veri gönderme)

<template>   <div>     <keep-alive>       <component :is="currentComponent" :user-data="userData"></component>     </keep-alive>     <button @click="currentComponent = 'UserProfileForm'">Profil Formu</button>     <button @click="sendDataToApi">Tüm Veriyi Gönder</button>   </div> </template>
<script> import UserProfileForm from './UserProfileForm.vue'; // Dinamik olarak yüklenecek component
export default {   components: {     UserProfileForm   },   data() {     return {       currentComponent: null,       userData: { name: '', email: '' } // Birden fazla veri saklayabiliriz     };   },   methods: {     async sendDataToApi() {       console.log('API'ye gönderilen nihai veri:', this.userData);       // Gerçek API çağrısı burada yapılır       // await fetch('/api/users', { method: 'POST', body: JSON.stringify(this.userData) });     }   } } </script>

Bu yapıda, `` içinde `` kullandık. Bu sayede `currentComponent` değişkeni değiştiğinde farklı component’ler yüklenebiliyor ve `` sayesinde bu component’ler hafızada tutuluyor. Yani, sayfalar arasında gezseniz bile `userData`’daki bilgiler kaybolmuyor. Sonra da `sendDataToApi` metodu ile tüm birikmiş veriyi backend’imize gönderebiliyoruz. Bu gerçekten hayat kurtaran bir özellik, inanın ki. Özellikle karmaşık formlar veya çok adımlı işlemler söz konusu olduğunda.

Neticede, dynamic components ve keep-alive, Vue.js uygulamalarınızda hem performansı artırmanıza hem de kullanıcı deneyimini iyileştirmenize yardımcı olan güçlü araçlar. Özellikle karmaşık arayüzlerde veya çok adımlı süreçlerde bu ikiliyi kullanmak, işinizi çok kolaylaştıracaktır. Sanırım bu konu hakkında daha fazla detaya girmeye gerek yok, mantığı kavradıysanız gerisi çorap söküğü gibi gelir. Yani, bu ikiliyi kullanarak daha akıcı ve kullanıcı dostu web uygulamaları geliştirebilirsiniz. Ne güzel değil mi?