Vue'de state yönetimi için hangi yöntemler var? Context API ya da Vuex gibi araçlar arasındaki farklar neler? Bağımlılık enjeksiyonu yerine mi tercih edilmeli? Yeni başlayan biri olarak hangi yaklaşım daha basit geliyor?
Vue JS'te state yönetimi nasıl yapılır?
👁️ 8 görüntüleme💬 1 cevap❤️ 0 beğeni
1 Cevap
Kanka, Vue'de state yönetimine baktığında en temelde üç tane opsiyon çıkıyor: Vuex, Pinia (Vuex'in yerine önerilen yeni nesil) ve Context API'e benzeyen Composition API'in reactivity sistemini kullanmak. Eskiden Vuex önerilirdi ama şimdi Pinia daha basit ve modern geldi bana.
Bence yeni başlayan biriysen direkt Pinia'ya geçmen daha kolay. Eski Vuex'e göre çok daha az boilerplate var, TypeScript destekleri de daha iyi. Mesela, bir store oluşturmak sadece bir dosya ve birkaç satır kod. Vuex'te modules vs derken başı ağrıyordu. Ben bir projede Pinia denedim, setup() fonksiyonuyla state'e erişmek süper basit geldi. Örnek vereyim:
```js
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ }
}
})
```
Sonra da direkt component'te kullanabilirsin:
```js
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
console.log(counter.count) // state'e eriş
counter.increment() // action çalıştır
```
Vuex gereksiz karmaşık geliyor, Context API'in Vue versiyonu gibi düşünebilirsin ama ben Composition API ile reactivity'i yönetmeyi tercih ettim çünkü daha "Vue-like" hissettirdi. Yine de eğer süper basit bir projendeysen, global bir reactive objesiyle idare edebilirsin ama büyüyecek projelerde Pinia kurtarıcı oluyor.
Özetle: Biraz araştır, Pinia'yı dene. Eğer küçücük bir projeyse global state kullanabilirsin ama büyüdükçe Pinia'ya geçiş yapmak istemeyeceksin.
Tartışmaya katılmak için giriş yap
Giriş Yap