Bu JavaScript kitaplığını kullanarak basit, durum tabanlı uygulamaları kolaylıkla oluşturun.

Temel Çıkarımlar

  • Pinia, Vue için minimalizme ve sezgisel bir yaklaşıma odaklanarak uygulama geliştirmeye basitlik ve verimlilik getiren bir durum yönetimi kitaplığıdır.
  • Pinia'nın temel kavramları, geliştiricilerin Vue bileşenlerinde verileri etkili bir şekilde yönetmesine ve paylaşmasına olanak tanıyan alıcıları, eylemleri, depolamayı ve durumu içerir.
  • Vuex ile karşılaştırıldığında Pinia, Vue'nun reaktivite sistemini kullanarak ve daha az hatayla daha sağlam uygulamalar için katı yazım ve TypeScript desteği sağlayarak daha modern ve minimalist bir yaklaşım sunar. Yeni projeler veya Vuex'ten geçiş için uygun bir seçenektir.

Durum yönetiminizi kolaylaştırmak ve uygulama geliştirmenizi yeni zirvelere taşımak isteyen bir Vue geliştiricisi misiniz? Vue meraklıları için oyunun kurallarını değiştiren durum yönetimi kitaplığı Pinia'ya merhaba deyin.

Pinia'nın temel kavramlarına adım adım göz atın ve potansiyelini nasıl ortaya çıkarabileceğinizi görün. Bu kitaplığın Vuex ile karşılaştırmasını öğrenin ve basit bir Pinia uygulamasının nasıl oluşturulacağını öğrenin.

instagram viewer

Pinia Nedir?

Pinia özel olarak bir devlet yönetimi kütüphanesidir. Vue için hazırlanmış, Vue projelerinize benzersiz basitlik ve verimlilik getirmek için tasarlanmıştır. Vue geliştiricileri için kusursuz bir deneyim sağlamak üzere geliştirilen Pinia, Vue'nun en iyi uygulamalarından ilham alıyor. modern durum yönetimi, son derece hafif ve uygulamalarınıza entegre edilmesi kolay.

Pinia'nın arkasındaki felsefe, geliştiricilerin uygulamanın durumunu yönetmesini zahmetsiz hale getirerek, her şeyi minimal ve zarif tutmaktır. Basit ve sezgisel bir yaklaşım benimseyen Pinia, en önemli şeylere odaklanmanıza ve Vue uygulamanızı oluştururken olağanüstü bir kullanıcı deneyimi sunmanıza olanak tanır.

Çekirdek Pinia Kavramları

Pinia'dan en iyi şekilde yararlanmak için temel kavramlarını anlamak çok önemlidir.

Alıcılar

Pinia'daki alıcılar, mağaza durumundan belirli değerleri çıkarmaktan ve döndürmekten sorumludur. Alıcıları tanımlayarak, temel durumu doğrudan değiştirmeden verilere verimli bir şekilde erişebilir ve işleyebilirsiniz. Bunları, mağazanızın durumuna göre uyarlanmış hesaplanmış özellikler olarak düşünün.

Hareketler

Eylemler, Pinia'da çok önemli bir rol oynar ve eşzamansız veya eşzamanlı işlemler gerçekleştirerek mağazanın durumunu değiştirmenize olanak tanır. Uygulamanızın bileşenleri ile mağaza arasında köprü görevi görerek durum mutasyonlarının öngörülebilir kalıpları izlemesini ve en iyi uygulamalara uymasını sağlarlar.

Mağaza

Mağaza, uygulamanın durumunu, alıcıları, eylemleri ve (varsa) mutasyonları kapsayan Pinia'nın kalbini temsil eder. Tek bir doğruluk kaynağı görevi görerek uygulamanızın durumunu merkezi ve bileşenleriniz boyunca kolayca erişilebilir durumda tutar.

Durum

Durum, mağazanızın yönettiği verileri ifade eder. Bu, bileşenlerinizin kullanıcıya en güncel bilgileri göstermek için güvendiği reaktif verilerdir. Mağaza içindeki durum nesnesini kullanarak, bileşenleri sorunsuz bir şekilde yönetebilir ve verileri paylaşabilirsiniz.

Peki ya Vuex?

Pinia'nın, bir süredir Vue geliştiricileri için bir devlet yönetim kitaplığı olan Vuex ile karşılaştırmasını merak ediyor olabilirsiniz. Vuex şüphesiz sağlam ve güçlü bir çözüm olsa da, Pinia daha modern ve minimalist bir yaklaşımla kendisini diğerlerinden ayırıyor.

Pinia, durumu yönetmek için Vue'nun reaktivite sistemini kullanır ve herhangi bir dış bağımlılığa ihtiyaç duymaz. Bu, Pinia ekosisteminin daha fazla odaklandığı ve potansiyel şişmeyi önlediği anlamına gelir. Ek olarak, sağladığı katı yazım ve TypeScript desteği, geliştirme sürecinin başlarında hataları yakalamanıza olanak tanıyarak daha az hatayla daha sağlam uygulamalara yol açar.

Yeni bir Vue projesine başlıyorsanız veya Vuex'ten geçiş yapmayı düşünüyorsanız Pinia, esneklik veya performanstan ödün vermeden durum yönetimini kolaylaştıran çekici bir alternatif sunar.

Pinia Kullanan Basit Vue Uygulaması

Pinia hakkında her şeyi öğrenmek için örnek bir uygulama oluşturmayı deneyin; A temel yapılacaklar listesi yöneticisi iyi bir adaydır. Yapılacaklar listesi uygulaması, kullanıcıların yapılacak işler ekleyebildiği, tamamlandığını işaretleyip gösterebildiği ve gerektiğinde işleri silip düzenleyebildiği basit bir yapıya sahiptir. Pinia, bu tür uygulamalar için durumu yönetmeniz için ihtiyaç duyduğunuz araçları sağlar.

Önkoşullar

Öncelikle Vue CLI ile başlayarak bu proje için gerekli ortamı hazırlamanız gerekiyor.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Bu aşamada, terminalde bir ön ayar seçmeniz gerektiğini görebilirsiniz. seçerek devam edebilirsiniz. Bölüm 3 varsayılan ayarlardan; bu örnek olacak Vue 3'ü kullanmaya devam edin.

Artık Pinia'yı proje klasörünüze kurabilirsiniz:

cd pinia-todo-app
npm install pinia

Dosyalarınızı Ayarlayın

Bu örnek projeyi tamamlamak için birkaç dosyayı düzenlemeniz yeterlidir.

İlk olarak, adında bir dosya oluşturun. mağaza.js altında kaynak dosya. Bu dosya, yapılacaklar listesine ekleyeceğiniz öğeleri tutar, ekler ve siler. Tüm bunları Pinia temel kavramlarını kullanarak yapacak.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Ama tabi ki bu dosya tek başına yeterli değil. link atmanız gerekiyor mağaza.js ile dosyala App.vue. Bunu yapmak için, src/App.vue dosya şu şekilde:

// src/App.vue