Vuex nedir ?

Sezai AlkanFrontend Developer

Vue.js #vuejs #vuex #store #state

Vuex Nedir ?

Vuex, Vue.js üzerinde kullanabileceğimiz bir state management / durum yönetimidir.
 

State management nedir ? 

Öncelikle oluşturuduğunuz proje belirli bir büyüklüğe geldiğinde veya bir proje üzerinde birden fazla kişi çalışıyor ise sizin yazdığınız kodları farklı bir ekip arkadaşınız gelerek acaba bu kod nerede çalışıyor diyebilir, buna bir başka örnek vermek gerekirse sizden sonra projeyi devrelan kişi için proje üzerinde yazılan kodların okunabilirliğini zorlaştırmaması için belirli bir düzende, standart da yazılması gerekmektedir.

Bu düzeni ise Vuex ile kolaylıkla sağlayabiliriz. Verilerimizi bu alanda saklayabilir ve işleyebiliriz.
Vuex üzerinde state, getters, mutations, actions gibi durumları ihtiyaca göre kullanabilmekteyiz.

Yukarıdaki görselde durum yönetiminin nasıl çalıştığını anlatan bir görsel bulunmaktadır. Bu görsel ve detaylarını vuex.vuejs.org adresinden görüntüleyebilirsiniz.
 

Vuex Kurulumu

npm install vuex --save

Projenizin bulunduğu dizinde yukarıdaki satırı terminalde çalıştırarak Vuex 'i yükleyebilirsiniz.
 

Vuex i projenize dahil etme

Projenizin bulunduğu dizin store adında bir klasör oluşturarak bunun içerisinde index.js adında bir javascript dosyası oluşturuyoruz. Bu klasör ve dosya isimleri sizin kullanımınıza göre değişiklik gösterebilmektedir. Fakat okunabilirliği arttırmak için tanımlamalar bu şekilde yapılmaktadır.

oluşturulan index.js dosyanızın içerisinde

import { createStore } from "vuex";

Satırı ile vuex i dosyamıza dahil ediyoruz. Vuex tanımlamalarını sağlayacağımız store alanı ise aşağıdaki gibidir.

export default createStore({
    state:{
       name : 'kodhocasi'
    },
    getters: {
       doneName(state){
           return state.name
       }
    }
})

index.js dosyamız içerisinde bu tanımlamaları sağladıktan sonra Vue uygulamamızı, oluşturduğumuz dosya üzerinde store 'u ekliyoruz.

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

daha sonrasında ise mount işlemi öncesi projemizin kullanabilmesi için aşağıdaki gibi projeye dahil ediyoruz.

const app = createApp(App)
app.use(store)
app.mount('#main')

projemizi çalıştırdan sonra Vuex projemize dahil olmakta ve çalışmaktadır. Bundan sonrasında ise Vuex içerisinde durumlar belirterek bunlara kolaylıkla veri gönderebilir, alabilir ve depolayabiliriz.