Vue Academy · Ders

Pinia ve Vuex: Geçişin Nedeni

MUTATION yok, TypeScript çıkarımı, DevTools desteği, daha basit API ve varsayılan olarak modüler yapı.

Pinia ve Vuex: Geçişin Nedeni, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Pinia Neden Vuex'in Yerini Aldı

Pinia, Vue 3 için önerilen resmî durum yönetimi kitaplığıdır ve Vuex'e tercih edilir. Vuex'in iyi yönlerini korurken gereksiz kalıp kodunu ve TypeScript ile çakışan bölümlerini kaldırır.

Artık Değişiklik İşlemleri Yok

Vuex, durumu değiştirmenin tek yolu olarak mutations kullanılmasını gerektiriyordu. Pinia bunları tamamen kaldırır — eylemler durumu doğrudan değiştirir. Daha az törensel kod, daha az dosya ve aynı geliştirici araçları izleme desteği.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

TypeScript Tür Çıkarımı Hazır Gelir

Vuex'te store'u türlendirmek zahmetliydi ve karmaşık sarmalayıcılar gerektiriyordu. Pinia, state, getters ve actions değerlerinizden türleri otomatik olarak çıkarır; ek bir türlendirme katmanı gerekmez.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Tasarımdan Modüler

Vuex, iç içe modules ve ad alanı yönetimi sorunları olan tek bir store kullanıyordu. Pinia doğası gereği modülerdir: her store için bir dosya bulunur ve her biri kendi defineStore işleviyle oluşturulur. Merkezi kayıt gerekmez.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

Ad Alanı Gerekmez

Her store bağımsız olduğundan ve kullanıldığı yerde içe aktarıldığından, yönetilecek genel bir ad alanı yoktur. İstediğiniz store'u içe aktarıp bir işlev olarak çağırmanız yeterlidir.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Geliştirici Araçları Desteği

Pinia, Vuex gibi Vue Geliştirici Araçları ile bütünleşir. Değişikliklerin zaman çizelgesini, durum incelemesini ve zaman içinde geriye giderek hata ayıklamayı değişiklik işlemleri yazmadan elde edersiniz.

Daha Küçük Paket

Pinia, Vuex'ten yaklaşık 1 KB daha küçüktür ve ağaç sarsma işlemiyle küçültülebilir. Hiç içe aktarmadığınız store'lar son pakete dahil edilmez.

Daha Sade API

mapState, mapGetters ve mapActions için gereksiz kalıp kodu yoktur. Store birleştirilebilir işlevini setup içinde çağırır ve döndürülen nesneyi doğrudan kullanırsınız.

const counter = useCounterStore()
// access state, getters, and actions on one object

Her İki API ile de Çalışır

Pinia, Seçenekler API'sini ve Bileşim API'sini destekler. Store yazmanın iki biçimi olan seçenek store'u (nesne) ve kurulum store'u (işlev), bu kursun ilerleyen bölümlerinde ele alınacaktır.

Pinia'yı Yükleme

Örneğini oluşturarak ve eklenti olarak kaydederek Pinia'yı uygulamanıza ekleyin. Bundan sonra herhangi bir bileşen, herhangi bir store'u kullanabilir.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

Pinia'ya Ne Zaman Başvurmalı

Durumun birçok bileşen arasında paylaşılması, rota değişikliklerinden sonra korunması veya geliştirici araçlarında incelenmesi gerektiğinde Pinia'yı kullanın. Tek bir bileşene yerel durum için düz bir ref hâlâ daha basittir.

Hızlı Kontrol

Pinia'nın Vuex'in yerini neden aldığını anlayıp anlamadığınızı kontrol edin.

Özet

Pinia, Vue 3 durum yönetimi için modern tercihtir:

Değişiklik işlemleri yoktur — eylemler durumu doğrudan değiştirir.
Sarmalayıcılar olmadan otomatik TypeScript tür çıkarımı.
Modüler yapı: dosya başına bir store, ad alanı yok.
Tam geliştirici araçları desteği ve yaklaşık 1 KB daha küçük paket.

Sıkça Sorulan Sorular

“Pinia ve Vuex: Geçişin Nedeni” dersi ücretsiz mi?

Evet — “Pinia ve Vuex: Geçişin Nedeni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Pinia ve Vuex: Geçişin Nedeni” dersinde ne öğreneceğim?

MUTATION yok, TypeScript çıkarımı, DevTools desteği, daha basit API ve varsayılan olarak modüler yapı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Pinia ve Vuex: Geçişin Nedeni” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Pinia ve Vuex: Geçişin Nedeni
defineStore: Durum, Getters ve Actions
Store'ları Birleştirme ve Store'lar Arası Erişim
Pinia Kalıcılığı ve DevTools

← Vue Academy Sayfasına Dön