Vue.js Uygulamalarında Vuex ile State (Durum) Yönetimi

Bu Rehberde Ne Öğreneceksiniz?

Büyük Vue.js projelerinde veri yönetimi zamanla karmaşıklaşır.
Bu rehberde Vuex kullanarak uygulama durumunu merkezi biçimde yöneteceksiniz.
State, Action, Mutation ve Modül yapısını gerçek bir senaryo ile öğreneceksiniz.

---

Vuex Nedir ve Neden Kullanılır?

Vuex, Vue.js için resmi state yönetim kütüphanesidir.
Tüm uygulama verileri tek bir merkezde tutulur.
Veri akışı tek yönlüdür ve kolayca takip edilir.

Vuex şu sorunları çözer:

• Bileşenler arası karmaşık veri aktarımı
• Kontrolsüz state değişiklikleri
• Ölçeklenmeyen uygulama mimarisi

---

Ön Gereksinimler

• Node.js v14.16.0 veya üzeri
• Vue CLI ile oluşturulmuş bir Vue 3 projesi
• Temel JavaScript, HTML ve CSS bilgisi

---

Adım 1: Veri ve Bileşen Hazırlığı

Önce örnek veri dosyasını oluşturalım.

mkdir src/data
touch src/data/sunucular.js

• Bu dosya uygulamada kullanılacak örnek sunucu verilerini içerir.

---

export default [
  { isim: 'İstanbul Veri Merkezi', kod: 'TR-IST', lokasyon: 'Türkiye' },
  { isim: 'Amsterdam Veri Merkezi', kod: 'EU-AMS', lokasyon: 'Hollanda' },
  { isim: 'Frankfurt Veri Merkezi', kod: 'EU-FRA', lokasyon: 'Almanya' }
]

• Şimdi bu verileri gösterecek kart bileşenini oluşturalım.

---

<template>
  <div class="sunucu-karti">
    <h3>{{ sunucu.kod }}</h3>
    <p>{{ sunucu.isim }}</p>
    <small>{{ sunucu.lokasyon }}</small>
  </div>
</template>

<script>
export default {
  props: {
    sunucu: { type: Object, required: true }
  }
}
</script>

• Bu bileşen tek bir sunucu bilgisini kart olarak gösterir.

---

Adım 2: Vuex Kurulumu ve Store Oluşturma

1. Vuex’i projeye ekleyelim.

npm install vuex@next --save

2. Store dosyasını oluşturalım.

import { createStore } from 'vuex'

export default createStore({
  state: {
    ad: 'Rabisu',
    soyad: 'Geliştiricisi',
    favoriler: []
  },
  mutations: {},
  actions: {},
  getters: {}
})

• Bu yapı uygulamanın tekil veri kaynağını oluşturur.

---

3. Store’u uygulamaya tanıtalım.

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

• Bu işlem Vuex’i tüm uygulama için erişilebilir yapar.

---

Adım 3: Actions, Mutations ve Getters

1. State doğrudan değiştirilmez.

2. Action → Mutation → State akışı izlenir.

export default createStore({
  state: {
    ad: 'Rabisu',
    soyad: 'Geliştiricisi',
    favoriler: []
  },
  getters: {
    tamIsim(state) {
      return `${state.ad} ${state.soyad}`
    }
  },
  mutations: {
    FAVORI_GUNCELLE(state, payload) {
      state.favoriler = payload
    }
  },
  actions: {
    favorilereEkle({ commit, state }, sunucu) {
      const yeniListe = [...state.favoriler, sunucu]
      commit('FAVORI_GUNCELLE', yeniListe)
    }
  }
})

• Getter veriyi işler

• Action iş mantığını yürütür

• Mutation state’i günceller

---

Adım 4: Vuex Modülleri ile Ölçeklenebilir Mimari

1. Store büyüdükçe modüller kullanılmalıdır.

export default {
  namespaced: true,
  state: {
    ad: 'Rabisu',
    soyad: 'Admin'
  },
  getters: {
    tamIsim: state => `${state.ad} ${state.soyad}`
  }
}

• Bu yapı store’u parçalara ayırır ve yönetimi kolaylaştırır.

---

Sıkça Sorulan Sorular (SSS)

1. Action ve Mutation farkı nedir? Mutation senkron çalışır, state’i günceller. Action asenkron olabilir ve mutation çağırır.

2. State neden doğrudan değiştirilmiyor? Takip edilebilirlik ve hata ayıklama için.

3. Vuex mi Pinia mı tercih edilmeli? Yeni projelerde Pinia önerilir. Vuex kurumsal projelerde hâlâ yaygındır.

4. Modül kullanmak zorunlu mu? Küçük projelerde değil. Büyük projelerde kesinlikle evet.

---

Sonuç

Bu rehberle Vuex’in temel ve ileri yapılarını öğrendiniz. Uygulamanız artık daha ölçeklenebilir ve kontrollü. Vue.js projelerinizi güvenle büyütebilirsiniz.

Geliştirdiğiniz uygulamaları yüksek performanslı altyapılarda çalıştırmak için Rabisu Bulut çözümlerini inceleyebilirsiniz.