Vuex nedir?

Vuex state managment

Vuex uygulama boyunca kullanacağımız fonskiyonların, verilerin tek bir merkez altında toplanmasını sağlayan bir veri yönetim kütüphanesidir.

Yukarıdaki görsele baktığımızda A componenti bir işlem gerçekleştirmek istiyor(Actions), bu işlemde backende çıkıp veri tabanından gelen kayıtları bekleyip daha sonra verileri mutations’a aktarıyor mutationsda ilgili veriler güncellenip state aktarılıyor, statedeki verilerimize getterslar aracılığıyla ulaşıp ilgili verilerimizi getters ile dinleyen componentlere(A,B,C) aktarıyoruz. Kısaca A componentinde yapılan bir işlem b ve c componentinede aynı şekilde yansımaktadır.

Şimdi bu görselleri ve anlattıklarımı uygulayalım.

Proje Oluşturma

vue create vuex-app

Axios Kurulumu

npm install axios --save

Vuex Kurulumu

npm install vuex --save
# veya vue cli ile
yarn add vuex

Kurulumlarımızı tamamladıktan sonra src/store/index.js store klasörü oluşturup index.js dosyamızı oluşturalım.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
kullanicilar: []
},
actions: {
kullanicilarigetir({ commit }) {
axios.get("http://jsonplaceholder.typicode.com/users").then((response) => {
commit("kullanicilistesiniguncelle", response.data)
})
}
},
mutations: {
kullanicilistesiniguncelle(state, kullaniciListesi) {
state.kullanicilar = kullaniciListesi;
}
},
getters: {
kullanicilarigetir(state) {
return state.kullanicilar;
}
}
})

İlgili importlarımızı gerçekleştirdikten sonra, vuex’imizi oluşturup sırasıyla state oluşturulup içerisine boş bir kullanıcı listesi tanımlıyoruz, actionslarımız yukarıdaki resimde olduğu gibi servise çıkmaktadır, servisten yanıt döndükten sonra commit fonskiyonunu çağırarak hangi mutations’ın çağırılacağını string olarak geçip ardında ilgili verimizi(payload) parametre olarak geçiyoruz, mutationsın içerisinde yer alan kullanicilistesiniguncelle fonksiyonumuz parametre olarak state ve veriyi(payload) alıp state içerisindeki kullanıcı listesini actionsdan gelen liste ile güncelleyecektir. Son olarak gettersların içerisinde yer alan kullanicilarigetir methodumuz parametre olarak state alır ve geriye state içerisindeki kullanici listesini geriye dönmektedir.

Şimdi sırada src/main.js dosyamıza oluşturmuş olduğumuz store dosyamızı import edip uygulama boyunca kullanacağımızı bildirelim.

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')

Son olarak componentlerimizi oluşturalım src/components/B.vue src/components/C.vue adında iki component oluşturalım. B ve C componentlermizin içeriği aşağıdaki gibi olacaktır. Template içerisinde store ulaşmak için “$” işaretinden sonra store ardından store içerisinde ulaşmak istediğimiz getters ve getters içerisindeki kullanicilarigetir adlı fonksiyon olacaktır.

<template>
<div>
{{JSON.stringify($store.getters.kullanicilarigetir)}}
</div>
</template>
<script>
export default {
}
</script>

A Componenti olarak src/App.vue componentini kullanacağım App.vue içeriği şu şekilde;

<template>
<div id="app">
<h1>A Componenti </h1>
<button @click="listeyiGetir">Kullanıcıları Getir</button>
{{JSON.stringify($store.getters.kullanicilarigetir)}}
<hr/>
<h1>B Componenti</h1>
<b-component/>
<h1>C Componenti</h1>
<c-component/>
</div>
</template>
<script>
import BComponent from './components/B'
import CComponent from './components/C'
export default {
name: 'App',
methods:{
listeyiGetir(){
this.$store.dispatch("kullanicilarigetir")
}
},
components:{
BComponent,
CComponent
}
}
</script>

Oluşturmuş olduğumuz B ve C componentlerini import ettikten sonra components içerisine kayıt (register) ediyoruz. Script içerisinde store erişmek için “this” anahtar kelimesinden sonra template içerisinden ulaşır gibi devam edip hangi fonksiyonu çalıştıracağımızı (dispatch) söylüyoruz actions içerisindeki kullanicilarigetir fonksiyonunu çalıştırıyoruz.

Görüldüğü üzere A componentinden çalıştırmış olduğum fonksiyonla beraber state güncellenip ve statedeki veriyi dinleyen tüm componentlerede aynı şekilde veri güncellenmiş oluyor.

Herkese İyi Çalışmalar. :)