e
sv

Vue JS ‘te Vuex ile State Yönetimi

Vuex ile state Yönetimi
avatar

Yazılım Method

  • e 2

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Progressive javascript framworü olan Vue JS’te state yönetimi vuex ile yapılmaktadır. State yönetimine ihtiyaç duymamızın belirli sebepleri vardır. Bunların en başında bir veriyi birden fazla component bazında kullanmamızdır. Eğer bir state manegment kullanmasaydık verilerin nerden değiştiğini , nereden istek oluştuğunu takip etmemiz zorlaşacaktı.

Eğer daha önce Vue JS 2 kullanmışsanız olarak props ile componentler arasında basit bir iletişim kurardık ama bunun Vue 3’teki karşılığı Provide / inject yerini almıştır. Bu makalemde ise Vuex 4 ile state yönetimi ve modül kullanarak state manegment işlemlerini göstereceğim.

Vuex Nedir?

Vuex , uygulamalarımızda yer alan data yönetim paradigmasıdır. Kütüphanenin içerisinde yer alan çekirdek konseptlerinin iç içe geçmesi ile oluşan sisteme Vuex adı verilmektedir. Vuex kullanarak ‘’Login’’ gibi işlemleri web sitelerinizde kolayca halledebilirsiniz.

Ayrıca Vuex , State, Getters, Mutations, Actions, Modules gibi 5 farklı çekirdek konseptinden oluşmuş olan bir frameworktür. Fakat bazı kişiler bu dizilimi 4+1 yani Getters, Mutations, Actions, State + Modules olarak da nitelendirilmektedir. Her nasıl adlandırılırsa adlandırılsın Vuex JS internet dünyası için oldukça önemli oluşumlardan biridir. Birçok işlem, günümüzde Vuex sayesinde kolayca gerçekleştirilebilmektedir.

vuex nedir
Vuex , uygulamalarımızda yer alan data yönetim paradigmasıdır.

Vuex Neden Kullanılır?

Data kullanımı, her uygulama üzerinde oldukça zor ve meşakatlidir. Fakat data yönetimi, uygulama ve site yapılarında en önemli olan olgulardan biridir. Bu nedenle datayı yönetme işlemi, uygulamayı sistematize etmenin yarısıdır. Dataları güvenli tutabilmek için Single Source of Truth (SSOT) olması şarttır. SSOT ile uygulama datalarını tek bir merkez üzerinden yönetebilmektek mümkündür. Bu sayede uygulama, yöneticilerin yükünü de hafiflemiş olur.

Ayrıca SSOT sayesinde tek yönlü güncellemeler de başarılı bir şekilde oluşturulabilmektedir. Buna ‘’undirectional’’ adı da verilmektedir. Undirectional güncellemeler, datanın SSOT yapısına sahip olmasını sağlayan etkenler arasında gösterilmektedir.

Vuex ’nin en güzel yanı, uygulamalarda yer alan tüm component’lara ve data’lara istediği anda ulaşabilir olmasıdır. Ayrıca Vuex , uygulamalar üzerinde istediği gibi değişiklikler de yapabilmektedir. Bu sayede kullanıcı için oldukça önemli kullanım avantajı oluşturmaktadır. Eğer bir component üzerinde değişiklik yapmak istiyorsanız ‘’action’’ veya ‘’mutation’’ dispatch uygulaması gerçekleştirerek mümkün hale getirebilirsiniz.

Vuex Neden Kullanılır?
Vuexi Daha Yüksek Data Potansiyelli Uygulamalarımızda Kullanrız

Vuex ‘in Avantajları Nelerdir?

  1. Düşük Boyut ve Yüksek Hız

Bir framework, ne kadar düşük boyutlara sahipse kullanıcıları için o kadar iyidir. Bu durum, Vuex JS kütüphanesinin rakipleri arasında kolayca yükselmesine neden olmuştur. Vuex , düşük boyutlara sahip bir framework’tür ve yüksek hızlarda çalışabilmektedir. Bir Vuex eklentisi, yaklaşık olarak 18-21KB arasındadır.

  1. Öğrenilmesi Çok Kolaydır

Bir kütüphanenin boyut olarak kullanışlı olmasının yanı sıra öğrenim detaylarında da programcıları yormaması gerekmektedir. Bu nedenle Vuex , 2021 yılında oldukça öne çıkan kütüphanelerden biri olmayı başarabilmiştir. Sözdizimi konusunda oldukça basit olan kütüphane, anlaşılması kolay dökümantasyon desteği ile her geçen gün daha fazla kullanıcıya erişim sağlamaktadır.

  1. Esnek Bir Yapıya Sahiptir

Vuex , basit ve esnek bir yapıya sahiptir. Paylaşılan kodları sadece JS dosyasına ekleyerek kolayca kullanmaya başlayabilirsiniz. Hatta internetten aldığınız kodlar sayesinde kendi projelerinizi dahi başlatabilirsiniz. Ayrıca oluşturduğunuz projelere uygun olarak eklenti seçmenize de yardımcı olmaktadır. Bu sayede kullanmayacağınız eklentileri yüklemek zorunda kalmazsınız.

  1. Yüksek Kitle Potansiyeli

Son zamanlarda oldukça fazla yükselişe geçen Vuex , hatırı sayılır bir kullanıcı topluluğuna da sahiptir. Bu sayede geliştirme sırasında yaşanan tüm sorunlara cevap bulabilmeniz ve sorunlarınızı başkalarına danışarak çözebilmeniz mümkün kılınmaktadır. Ayrıca kütüphanenin tüm versiyonlarına ulaşabilmeniz de hem kolay hem de ücretsiz olacaktır.

  1. Virtual Dom Özelliği

Vitual dom eklentisi, REACT framework’ü tarafından kullanılmakta olan bir özelliktir. Kullanıcılara sağladığı avantaj ise projede yapılan değişikliklerin ardından doğrudan dom değil memory’de yer alan dom’un clone hali güncellenmekte ve arada gerçekleşen farklar en uygun zamanda ana dom’a geçmektedir.

Tüm bunların yanı sıra Vuex , bileşen yapısını da desteklemektedir. İhtiyacınıza bağlı olarak tasarladığınız etiketlerde dom üzerinde bileşen teması veya alt bileşenler kolayca oluşturabilirsiniz. Bu durum, kütüphane çalışmalarına yeni başlayan kişiler tarafından dahi yapılabilmektedir. Bu sayede Vuex , geleceğin en önemli framework uygulamaları arasında gösterilmektedir.

Tüm bunların yanı sıra Vuex JS, bileşen yapısını da desteklemektedir. İhtiyacınıza bağlı olarak tasarladığınız etiketlerde dom üzerinde bileşen teması veya alt bileşenler kolayca oluşturabilirsiniz. Bu durum, kütüphane çalışmalarına yeni başlayan kişiler tarafından dahi yapılabilmektedir. Bu sayede Vuex JS, geleceğin en önemli framework uygulamaları arasında gösterilmektedir.

Vuex ‘in Avantajları Nelerdir?
Vuex ‘in Avantajları Nelerdir?

VueJS ‘te Vuex ile State Yönetim İşlemleri

State yönetimi olarak adlandırdığımız state manegment işlemlerini size uygulamalı olarak anlatacağım. Bir vuex starter oluşturacağım için kullanacağım yazılımların sürümlerini aşağıda bırakıyorum.

VUE JS3
Vuex4
Vue CLI4.5.13 ^
Node JS14 ^
VueJS ‘te Vuex ile State Yönetim için Gereksinimler

Vuex 4 Nedir ?


Vuex, Vue.js uygulamaları için bir state yönetim+ kütüphanesidir . Durumun yalnızca öngörülebilir bir şekilde mutasyona uğramasını sağlayan kurallarla, bir uygulamadaki tüm bileşenler için merkezi bir veri deposu görevi görür. Vuex Vue JS tarafından geliştirilmektedir. React taki Hooks diyebilirim ve hatta ondan daha iyi 🙂

Şuanki Vue JS3 sürümüne uygun olan vuex 4 dökümantasyonu buradadır. Eğer yazılımınız Vue 2 kullanmışsanız vuex 3 kullanmanız gerekmektedir. SPA ( Sİngle Page Aplication ) sayfaları için vuex idealdir ama vuexsizde yapabileceğinizi unutmayınız .

VUE JS 3’te Vuex 4 ile State Modül Kullanarak State Yönetimi

Vuex hakkında her şeyi size teorik olarak anllatım şimdi uygulamaya dökme vakti 🙂 Madül yapısını tercih etmemdeki amaç yazılımcıların daha verimli uygulama geliştirmesini sağladığına inandığımdan dolayı. Hiç Vakit kaybetmeden uygulamamıza geçelim .

  1. Vue CLI İle uygulamamızı oluşturalım

buradaki makalemden de yararlanarak bir vue 3 projesi oluşturnuz.

  1. Projeye Vuex 4′ ü Dahil Edelim

Terminali açarak aşağıdaki kodu yazdıktan sonra projemize vuex’i indirelim ardından main.js ‘te store’muzu tanımlayalım.

// Aşağıdaki Kodu Terminale Yazalım
npm i vuex@4.0.2

// Aşağıdakş Kodları ise main.js 'e yazarak store'u tanımlayalım 
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

const app = createApp(App);
app.use(store);
app.mount("#app");
  1. Store’muz için dosya tanımlamaları yapalım

## Lütfen Aşağıdaki Dizin yapısını ve klasör 
## dosyaları oluşturunuz yoksa hatalarla karşılaşırsınız !

├───public
└───src
    ├───assets
    ├───components
    └───store
        └───modules 
            └───contact.js
            └───taskmanager.js
        └───index.js




Modül dosyalarımızda olacağından birden fazla dosya ve klasöre sahip olacağız. Peojemizde src klasörünün içine store klasörü oluşturalım oluşturduktan sonra index.js dosyası ile ana statetimizi tanımlayalım. index.js dosyasında ise ;

Vuex’ten createStore ‘u import ediyoruz , modülümüzdeki dosyalarıda altına import edelim. Ardından store nesnesi oluşturarak ve createStore fonksiyonundan yararlanarak sate oluşturalım .

import { createStore } from "vuex"; //vuexi dahil ediyoruz
import contact from "./modules/contact";  // modülümüzdeki contact.js i dahil ediyoruz
import taskmanager from "./modules/taskmanager"; // modülümüzdeki taskmanager.js i dahil ediyoruz


const store = createStore({
  state: {
    mainName: "www.yazilimmethod.com"
  },
  mutations: {},
  modules: {
    musteri: contact,
    taskmanager
  }
});

export default store; // export ediyoruz
  1. Vuex’te Modül Yönetimi

İşte işin eğlenceli kısmı 2 ek modül oluşturdum buradaki modüllerde ise state’ler , mutations , getters v.s ama benim değinmek istediğim ise namespace olayı , Bundan dolayı Vuex 4’ü tercih ediyorum . Böylece namespace kullanarak daha iyi bir state yönetim işlemi yapabiliriz.

export default {
  namespaced: true,
  state: {
    contactName: "puresol",
    contactAddress: "Kanada",
    propertyList: []
  },
  mutations: {
    setItem(state, name) {
      state.contactName = name;
    }
  },
  getters: {
    _contactName: state => state.contactName
    // _itemList: state => state.propertyList
  }
};
export default {
  namespaced: true,
  state: {
    itemList: [],
    userList: []
  },
  mutations: {
    setItem(state, item) {
      state.itemList.push(item);
    }
  },
  getters: {
    _itemList: state => state.itemList
  }
};
  1. App.vue hazırlama ve State Yönetimini kullanımı

Aşağıdaki vereciğim kodlarda namespace ve mapGetters kullanarak frontede taşımış olduk. Vuex için bundan sonra size kalmıştır 🙂

<template>
  <p>
    {{ $store.state.mainName }}
  </p>

  <p>
    {{ $store.state.musteri.contactName }}
  </p>

  <pre>
    {{ musteriADI }}
  </pre>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "App",
  created() {
    console.log(this.$store.getters["musteri/_contactName"]);
  },
  computed: {
    ...mapGetters({
      musteriADI: "musteri/_contactName"
    })
  }
};
</script>

bu makaleyi vuex tanıtımı , niçin kullanmamız gerektiğinden bahsetmek için yazmıştım ama yinede basit düzey uygulama seviyesinde gösterim dedim kodların detaylarına girmeyip actions v.s sizleri fazla sıkmak istemedim 🙂

Sıradaki içerik:

Vue JS ‘te Vuex ile State Yönetimi