Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Pinia state yönetim kütüphanesinin kullanımını anlatan kapsamlı bir eğitim içeriğidir.
- Video, Pinia'nın ne olduğu, özellikleri ve kullanım alanları hakkında bilgi vererek başlıyor, ardından kurulum adımları ve temel kullanım örnekleri gösteriliyor. Eğitimde Pinia'nın store'ları, action'ları, state yönetimi, login ve logout işlemleri, loading efektleri ve router yönlendirmeleri gibi konular adım adım anlatılıyor. Ayrıca Pinia Persisted State paketi kullanılarak verilerin sayfa yenilendikten sonra da saklanması ve kullanıcı giriş durumuna göre erişim kontrolü yapılarak yönlendirme işlemleri de gösteriliyor.
- Video, izleyicilerin Pinia'yı kendi projelerinde nasıl kullanabileceklerini gösteren bir rehber niteliğindedir ve özellikle Pinia ve router kullanımını öğrenmek isteyenler için faydalı olacaktır.
- 00:09Pinia Kütüphanesi Tanıtımı
- Pinia, Vue.js alternatif olarak gelen bir state yönetim kütüphanesidir ve Composition API ile uyumlu çalışır.
- Pinia çok hızlı ve yapısı gereği yaklaşık bir kilobayt yer kaplar.
- Pinia ile birden fazla store oluşturulabilir, örneğin authentication işlemi için veya product için ayrı store'lar kullanılabilir.
- 01:10Proje Tanıtımı
- Proje bir giriş yap ekranı içerir ve kullanıcı giriş yaptıktan sonra home root'una yönlendirilir.
- Giriş yapma işlemi sırasında loading efekti gösterilir ve işlem bittiğinde loading false olur.
- Kullanıcı giriş yaptıktan sonra test user'ı görüntülenir ve sayfa yenilendiğinde de aynı kullanıcı görüntülenir.
- 02:10Proje Kaynakları
- Proje için bir makale ve film API'si kullanılarak filmleri listeleme ve filtreleme işlemleri gösterilmiştir.
- Projenin GitHub linki ve template'i için aşağıdaki linkler bulunmaktadır.
- Proje üç branch'e sahiptir: template, sıfır haline ve master (projenin bitmiş hali).
- 03:10Pinia Kurulumu
- Proje için "youtube" adında bir branch oluşturulmuş ve Pinia paketi npm ile projeye dahil edilmiştir.
- Klasörleme yapısı için "store" adında bir klasör ve "index.js" adında bir dosya oluşturulmuştur.
- Pinia konfigürasyonu için "createPin" fonksiyonu kullanılarak bir Pinia dosyası oluşturulmuştur.
- 05:36Pinia Store Oluşturma
- İlk Pinia store'u için "out.js" dosyası oluşturulmuş ve "useOutStore" fonksiyonu tanımlanmıştır.
- Store için "id" olarak "out" kullanılmış ve state içerisinde "user" ve "loading" bilgileri tutulmuştur.
- Actions bölümünde login ve logout işlemleri için fonksiyonlar yazılmıştır.
- 07:31Login İşlemi
- Login view'unda form oluşturulmuş ve submit prevent yerine action fonksiyonu çağrılacaktır.
- "handleLogin" fonksiyonu oluşturulmuş ve form verileri alınarak Pinia store'una gönderilmiştir.
- Form boş bırakıldığında uyarı mesajı gösterilmesi ve loading efekti için spinner kullanımı gösterilmiştir.
- 11:51Router ve Yönlendirme
- Login işlemi başarılı olduğunda router push kullanılarak home'a yönlendirme yapılacaktır.
- Pinia tarafında "routerMarkerRoute" kullanılarak store ile router entegrasyonu sağlanmıştır.
- Giriş işlemi başarılı olduğunda kullanıcı adı ekrana yazdırılmıştır.
- 13:52Pinia Dev Tools Eklentisi
- Pinia'nın geliştirdiği bir eklenti Chrome tarafından eklentiler bölümünden kurulabilir.
- Bu eklenti sayesinde pin içerisindeki değişkenler ve routerlar gibi komponentler görüntülenebilir.
- 14:26Kullanıcı Bilgilerini Gösterme
- API'dan giriş yapıldığında genellikle şifre görünmez, bu nedenle şifre gizlenebilir.
- Mevcut kullanıcıyı almak için "get current user" fonksiyonu kullanılır ve state'den gelen değer döndürülür.
- Home view'e giderek mevcut kullanıcı ismini yazdırmak için store import edilir ve "current user" değişkeni kullanılır.
- 17:18Çıkış İşlemi ve State Sıfırlama
- Çıkış yapmak için bir aksiyon yazılır ve user'ın içeriği sıfırlanır.
- Router push ile kullanıcı login sayfasına yönlendirilir.
- Çıkış yapıldığında store sıfırlanır ve kullanıcı bilgileri kaybolur.
- 18:43Persistent State Kullanımı
- Sayfayı yenilediğimizde verilerin kaybolmaması için "pinya persisted state" paketi kullanılır.
- Pin dosyasında index.js dosyasına store dosyası çağrılır ve "pin use pina pers state" ile kullanılır.
- "persest true" ayarı yapılarak veriler kaydedilir ve sayfa yenilendiğinde bile kullanıcı bilgileri korunur.
- 20:31Router Düzenlemesi
- Kullanıcı giriş yapmadıysa home'a gidemeyecek veya giriş yaptıysa login tarafına gidemeyecek şekilde router düzenlenir.
- "is out" değişkeni state'den alınarak kullanıcı giriş yapmış mı kontrol edilir.
- Login ve home sayfalarına erişim için "out required" kontrolü yapılır ve kullanıcı giriş yapmadıysa ilgili sayfaya yönlendirilir.