Durum Yönetimi Giriş
Vue.js’de durum yönetimi, bir uygulamadaki verilerin bileşenler arasında düzenli ve tutarlı bir şekilde kontrol edilmesini sağlayan bir yöntemdir. Küçük uygulamalarda durum, bileşenlerin kendi içinde saklanabilir; ancak uygulama büyüdükçe, merkezi bir durum yönetimi kullanmak, verilerin tutarlılığını sağlamak ve kod bakımını kolaylaştırmak için önemlidir.
Vue.js, ref ve reactive gibi reaktif veri araçları ile bileşen içinde durum oluşturmayı kolaylaştırır. Bu sayede veri değişiklikleri otomatik olarak arayüzü günceller. Daha büyük projelerde ise Vuex veya Pinia gibi kütüphaneler kullanılarak global durum yönetimi sağlanabilir. Bu yöntem, tüm bileşenlerin güvenli bir şekilde veriye erişmesini ve değişiklik yapmasını sağlar.
Bu eğitimde, Vue.js’de durum yönetimi ile ilgili temel kavramları, syntax, veri yapıları, basit algoritmalar ve nesne yönelimli programlama prensiplerini öğreneceksiniz. Durumun bileşenlerle nasıl bağlandığını, yaygın hatalardan nasıl kaçınılacağını ve verimli tasarım desenlerinin nasıl uygulanacağını göreceksiniz. Bu bilgiler, Vue.js projelerinde daha güvenilir ve ölçeklenebilir uygulamalar geliştirmenizi sağlayacaktır.
Temel Örnek <template>
text<div>
<h1>Basit Sayaç</h1>
<p>Mevcut Değer: {{ count }}</p>
<button @click="increment">Arttır</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
}
}
</script>Bu temel örnekte, Vue.js Composition API kullanılarak basit bir sayaç oluşturulmuştur. ref fonksiyonu, reaktif bir değişken olan count’u oluşturur; bu sayede değer değiştiğinde arayüz otomatik olarak güncellenir. increment fonksiyonu, butona tıklandığında sayacı arttırır.
setup() bloğu, bileşenin durumunu ve metodlarını tanımlamak için kullanılır. return { count, increment } ifadesi, bu değişkenlerin template içinde erişilebilir olmasını sağlar. Bu örnek, durum yönetiminin temel prensiplerini: reaktif veri oluşturma, arayüz ile bağlama ve kontrollü veri güncelleme yollarını göstermektedir. Ayrıca, DOM’u doğrudan manipüle etmeden durumu yönetmeyi ve hafıza sızıntılarını önlemeyi öğretir.
Pratik Örnek <template>
text<div>
<h2>Görev Listesi</h2>
<input v-model="newTask" placeholder="Yeni görev" />
<button @click="addTask">Ekle</button>
<ul>
<li v-for="task in tasks" :key="task.id">
{{ task.text }}
<button @click="removeTask(task.id)">Sil</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
tasks: [],
newTask: ''
});
function addTask() {
if (state.newTask.trim() !== '') {
state.tasks.push({ id: Date.now(), text: state.newTask });
state.newTask = '';
}
}
function removeTask(id) {
state.tasks = state.tasks.filter(task => task.id !== id);
}
return { ...state, addTask, removeTask };
}
}
</script>Bu pratik örnek, görev listesi uygulaması üzerinden durum yönetimini gösterir. reactive ile bir obje oluşturulmuş ve bu obje içinde görevler listesi ve input değeri tutulmuştur. addTask fonksiyonu yeni görev eklerken, removeTask fonksiyonu seçilen görevi siler.
v-model direktifi, input ile state arasında çift yönlü veri bağlaması sağlar. v-for ile listelenen görevler otomatik olarak güncellenir. Bu örnek, daha karmaşık veri yapılarının nasıl yönetileceğini, basit algoritmaların ve OOP prensiplerinin Vue.js bileşenlerinde nasıl uygulanacağını gösterir.
Vue.js’de durum yönetiminde en iyi uygulamalar ve yaygın hatalar:
refvereactivekullanarak reaktif veri oluşturmak, DOM’u doğrudan manipüle etmemek- Yerel ve global durumları ayırarak ölçeklenebilirlik sağlamak
- Array ve objeleri güncellerken
push,filter,mapgibi reaktif yöntemler kullanmak computedvewatchile türetilmiş verileri ve değişiklikleri takip etmek- Kullanıcı girişlerini doğrulamak ve güvenliği sağlamak
- Vue DevTools ile durumları debug etmek
- Bellek sızıntısı ve gereksiz UI güncellemelerinden kaçınmak
- Büyük veri setlerinde performans optimizasyonu yapmak
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Yerel reaktif durum oluşturur | const count = ref(0) |
| reactive | Objeler ve arrayler için reaktif durum | const state = reactive({ tasks: [] }) |
| v-model | Input ve state arasında çift yönlü bağ | <input v-model="newTask" /> |
| @event | DOM olaylarını metoda bağlar | <button @click="addTask">Ekle</button> |
| computed | Türetilmiş özellikler oluşturur | const double = computed(() => count.value * 2) |
| watch | Durum değişikliklerini izler | watch(count, (newVal) => console.log(newVal)) |
Durum yönetimi, Vue.js’de reaktif uygulamalar oluşturmanın temelidir. Yerel ve global durumları ayırt etmek, uygulamayı ölçeklenebilir ve sürdürülebilir kılar. Öğrendikleriniz, Vuex/Pinia kullanımı, modüler mimari, asenkron veri yönetimi ve computed ile watch fonksiyonlarının ileri düzey kullanımı gibi konulara hazırlar. Bu bilgilerle, Vue.js projelerinde güvenilir ve profesyonel uygulamalar geliştirebilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek