Modern web uygulamalar\u0131, kullan\u0131c\u0131 aray\u00fczlerinin karma\u015f\u0131kl\u0131\u011f\u0131 ve interaktifli\u011fi artt\u0131k\u00e7a, veri y\u00f6netimi konusunda \u00f6nemli zorluklarla kar\u015f\u0131la\u015fmaktad\u0131r. \u00d6zellikle Vue.js gibi bile\u015fen tabanl\u0131 bir framework ile geli\u015ftirilen uygulamalarda, farkl\u0131 bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131 ve senkronizasyonu kritik bir hale gelir. Bu noktada, merkezi bir durum y\u00f6netim sistemi olan Vuex devreye girer. Bu makalede, Vue.js uygulamalar\u0131nda durum y\u00f6netimi ihtiyac\u0131n\u0131, Vuex’in temel prensiplerini, bile\u015fenlerini ve kullan\u0131m\u0131n\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, Vuex ile b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar geli\u015ftirirken dikkat edilmesi gereken en iyi uygulamalara ve mimari yakla\u015f\u0131mlara da de\u011finece\u011fiz.<\/p>\n
Tek sayfal\u0131k uygulamalar\u0131n (SPA) pop\u00fclaritesi artt\u0131k\u00e7a, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren dinamik ve etkile\u015fimli aray\u00fczler standart haline gelmi\u015ftir. Vue.js gibi bir framework, bu t\u00fcr aray\u00fczleri bile\u015fenlere ay\u0131rarak geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. Ancak, bir uygulama b\u00fcy\u00fcd\u00fck\u00e7e ve y\u00fczlerce bile\u015feni i\u00e7ermeye ba\u015flad\u0131k\u00e7a, bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek karma\u015f\u0131k bir hal alabilir.<\/p>\n
Ba\u015flang\u0131\u00e7ta, Vue’nun props ve event mekanizmalar\u0131, ebeveyn-\u00e7ocuk ili\u015fkisindeki bile\u015fenler aras\u0131nda veri ileti\u015fimini sa\u011flamak i\u00e7in yeterlidir. Ebeveyn bile\u015fenler, props arac\u0131l\u0131\u011f\u0131yla verileri \u00e7ocuklar\u0131na iletirken, \u00e7ocuklar da event’ler arac\u0131l\u0131\u011f\u0131yla ebeveynlerine mesaj g\u00f6nderebilirler. Ancak, bu model, “props drilling” (veriyi bir\u00e7ok ara bile\u015fen \u00fczerinden ge\u00e7irme) veya “event hell” (\u00e7ok say\u0131da event’in y\u00f6netilemez hale gelmesi) gibi sorunlara yol a\u00e7abilir. \u00d6zellikle, ayn\u0131 veriye ihtiya\u00e7 duyan ancak do\u011frudan ebeveyn-\u00e7ocuk ili\u015fkisi i\u00e7inde olmayan karde\u015f bile\u015fenler veya tamamen farkl\u0131 dallardaki bile\u015fenler s\u00f6z konusu oldu\u011funda, bu ileti\u015fim mekanizmalar\u0131 yetersiz kal\u0131r.<\/p>\n
\u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda sepetin durumunu d\u00fc\u015f\u00fcnelim. Sepete \u00fcr\u00fcn ekleyen bir \u00fcr\u00fcn kart\u0131 bile\u015feni, sepetin i\u00e7eri\u011fini g\u00f6steren bir mini sepet bile\u015feni ve \u00f6deme sayfas\u0131ndaki toplam tutar\u0131 g\u00f6steren bir ba\u015fka bile\u015fen, hepsi ayn\u0131 sepet verisine eri\u015fmek ve onu g\u00fcncellemek zorundad\u0131r. Bu bile\u015fenler aras\u0131nda props ve event’lerle manuel olarak veri senkronizasyonu sa\u011flamak, hem kod tekrar\u0131na yol a\u00e7ar hem de uygulaman\u0131n bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r. Ayr\u0131ca, uygulaman\u0131n genel oturum durumu (kullan\u0131c\u0131 giri\u015f yapm\u0131\u015f m\u0131?), tema ayarlar\u0131 veya bildirimler gibi global verilere de merkezi bir yerden eri\u015fim ihtiyac\u0131 do\u011far.<\/p>\n
\u0130\u015fte bu noktada, merkezi bir durum y\u00f6netim sistemi devreye girer. Merkezi durum y\u00f6netimi, uygulaman\u0131n t\u00fcm durumunu tek bir yerde toplar ve bu duruma eri\u015fim ile de\u011fi\u015fiklikleri \u00f6ng\u00f6r\u00fclebilir ve izlenebilir bir \u015fekilde kontrol etmeyi sa\u011flar. Vuex, Vue.js ekosistemi i\u00e7in tasarlanm\u0131\u015f, bu t\u00fcr bir merkezi durum y\u00f6netim k\u00fct\u00fcphanesidir.<\/p>\n
Vuex, Vue.js uygulamalar\u0131 i\u00e7in bir durum y\u00f6netim k\u00fct\u00fcphanesidir. Uygulaman\u0131n t\u00fcm bile\u015fenleri i\u00e7in merkezi bir depolama alan\u0131 (store) g\u00f6revi g\u00f6r\u00fcr. Bu, uygulaman\u0131n durumunun (state) tek bir yerde tutuldu\u011fu ve t\u00fcm bile\u015fenlerin bu durumu okuyabilece\u011fi veya belirli kurallar \u00e7er\u00e7evesinde g\u00fcncelleyebilece\u011fi anlam\u0131na gelir. Vuex, Redux’tan esinlenerek geli\u015ftirilmi\u015f olup, Flux mimarisinin temel prensiplerini benimser.<\/p>\n
Vuex’in temel amac\u0131, uygulaman\u0131n durumunu y\u00f6netilebilir, \u00f6ng\u00f6r\u00fclebilir ve hata ay\u0131klanabilir hale getirmektir. Bunu sa\u011flamak i\u00e7in “Tekil Kaynak (Single Source of Truth)” prensibini benimser. Yani, uygulaman\u0131n her yerindeki durum verisi, tek bir merkezi depoda bulunur. Bu durum, Vue’nun reaktif sistemi ile entegre \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in, depodaki herhangi bir veri de\u011fi\u015fti\u011finde, o veriyi kullanan t\u00fcm bile\u015fenler otomatik olarak g\u00fcncellenir.<\/p>\n
Vuex, durum y\u00f6netimini be\u015f temel bile\u015fen etraf\u0131nda yap\u0131land\u0131r\u0131r:<\/p>\n
Bu bile\u015fenler, Vuex’in kat\u0131 bir veri ak\u0131\u015f\u0131 prensibini uygulamas\u0131n\u0131 sa\u011flar. Bu prensip sayesinde, uygulaman\u0131n herhangi bir an\u0131ndaki durumu kolayca takip edilebilir, de\u011fi\u015fikliklerin ne zaman ve nas\u0131l yap\u0131ld\u0131\u011f\u0131 net bir \u015fekilde anla\u015f\u0131labilir. Bu da \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda hata ay\u0131klama ve bak\u0131m s\u00fcre\u00e7lerini \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n
State, Vuex store’unun kalbidir ve uygulaman\u0131n t\u00fcm reaktif durumunu bar\u0131nd\u0131r\u0131r. T\u0131pk\u0131 bir Vue bile\u015feninin State’i tan\u0131mlamak olduk\u00e7a basittir:<\/p>\n Bile\u015fenler i\u00e7inde state’e eri\u015fmenin birka\u00e7 yolu vard\u0131r. En yayg\u0131n y\u00f6ntemlerden biri, computed property kullanarak do\u011frudan eri\u015fim sa\u011flamakt\u0131r:<\/p>\n Daha d\u00fczenli ve okunabilir bir yol i\u00e7in Getters, Vuex store’undaki state’ten t\u00fcretilmi\u015f (computed) verileri sa\u011flamak i\u00e7in kullan\u0131l\u0131r. T\u0131pk\u0131 Vue bile\u015fenlerindeki computed properties gibi, getters da state de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplan\u0131r ve sonu\u00e7lar\u0131 \u00f6nbelle\u011fe al\u0131r. Getters, state’i do\u011frudan de\u011fi\u015ftirmemeli, sadece okuma ve t\u00fcretme i\u015flemleri yapmal\u0131d\u0131r.<\/p>\n Getters’\u0131 kullanarak, uygulaman\u0131n farkl\u0131 yerlerinde ayn\u0131 hesaplamay\u0131 tekrar tekrar yapmaktan ka\u00e7\u0131nabilir ve kodun daha mod\u00fcler olmas\u0131n\u0131 sa\u011flayabiliriz. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesinden sadece aktif \u00fcr\u00fcnleri filtrelemek veya bir say\u0131sal de\u011feri formatlamak gibi i\u015flemler getters arac\u0131l\u0131\u011f\u0131yla yap\u0131labilir.<\/p>\n Getters tan\u0131mlama:<\/p>\n Bile\u015fenlerden getters’a eri\u015fim:<\/p>\n Yine, Mutations, Vuex store’undaki state’i de\u011fi\u015ftiren tek yoldur. Vuex’in en kat\u0131 kurallar\u0131ndan biridir: state’i do\u011frudan de\u011fi\u015ftirmek yerine her zaman bir mutation commit etmelisiniz. Mutations’lar senkron olmak zorundad\u0131r; bu, bir mutation’\u0131n \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda state’i an\u0131nda de\u011fi\u015ftirmesi ve herhangi bir asenkron i\u015flem i\u00e7ermemesi gerekti\u011fi anlam\u0131na gelir. Bu kural, Vuex Devtools gibi ara\u00e7lar\u0131n state de\u011fi\u015fikliklerini do\u011fru bir \u015fekilde izlemesini ve zaman yolculu\u011fu hata ay\u0131klamas\u0131n\u0131 (time-travel debugging) m\u00fcmk\u00fcn k\u0131lar.<\/p>\n Her mutation’\u0131n bir tipi (string bir isim) ve bir handler fonksiyonu vard\u0131r. Handler fonksiyonu ilk arg\u00fcman olarak state’i al\u0131r. \u0130kinci bir arg\u00fcman olarak, iste\u011fe ba\u011fl\u0131 bir “payload” (veri) alabilir. Payload, tek bir obje olmal\u0131d\u0131r, bu da birden fazla veri g\u00f6ndermeniz gerekti\u011finde i\u015fleri kolayla\u015ft\u0131r\u0131r.<\/p>\n Mutations tan\u0131mlama:<\/p>\n Mutations’lar\u0131 \u00e7a\u011f\u0131rmak i\u00e7in Actions, asenkron i\u015flemleri (API \u00e7a\u011fr\u0131lar\u0131, zamanlay\u0131c\u0131lar vb.) ger\u00e7ekle\u015ftirmek ve ard\u0131ndan state’i de\u011fi\u015ftirmek i\u00e7in Mutations’lar\u0131 \u00e7a\u011f\u0131rmakla sorumludur. Actions, state’i do\u011frudan de\u011fi\u015ftiremez; bunun yerine bir veya daha fazla Mutation’\u0131 commit eder. Bu ayr\u0131m, uygulaman\u0131n i\u015f mant\u0131\u011f\u0131n\u0131 ve veri ak\u0131\u015f\u0131n\u0131 daha net bir \u015fekilde organize etmeye yard\u0131mc\u0131 olur.<\/p>\n Her action’\u0131n bir tipi ve bir handler fonksiyonu vard\u0131r. Handler fonksiyonu ilk arg\u00fcman olarak bir Actions tan\u0131mlama:<\/p>\n Actions’lar\u0131 \u00e7a\u011f\u0131rmak i\u00e7in Vuex’i bir Vue.js uygulamas\u0131na entegre etmek olduk\u00e7a basittir.<\/p>\n 1. Kurulum:<\/strong><\/p>\n \u00d6ncelikle Vuex paketini projenize eklemeniz gerekir:<\/p>\n 2. Store Olu\u015fturma:<\/strong><\/p>\n Genellikle projenizin k\u00f6k dizininde bir 3. Vue Uygulamas\u0131na Entegrasyon:<\/strong><\/p>\n Store’u ana Vue uygulamas\u0131na eklemeniz gerekir. Bu genellikle 4. Bile\u015fenlerde Kullan\u0131m:<\/strong><\/p>\n \u015eimdi bir bile\u015fen i\u00e7inde bu store’u nas\u0131l kullanaca\u011f\u0131m\u0131za bakal\u0131m. Basit bir saya\u00e7 bile\u015feni olu\u015fturabiliriz:<\/p>\n \u00c7ift Say\u0131: {{ doubleCount }}<\/p>\n data<\/code> \u00f6zelli\u011fi gibi, state de do\u011frudan bile\u015fenler taraf\u0131ndan okunabilir ancak do\u011frudan de\u011fi\u015ftirilemez. State’teki herhangi bir de\u011fi\u015fiklik, bu state’i kullanan t\u00fcm bile\u015fenlerin otomatik olarak yeniden render edilmesini tetikler. Bu, Vue’nun reaktif sisteminin Vuex ile entegre \u00e7al\u0131\u015fmas\u0131n\u0131n bir sonucudur.<\/p>\nconst store = new Vuex.Store({\n state: {\n count: 0,\n isAuthenticated: false,\n user: null,\n products: []\n }\n});\n<\/code><\/pre>\n\/\/ Bir Vue bile\u015feni i\u00e7inde\nexport default {\n computed: {\n currentCount() {\n return this.$store.state.count;\n },\n isLoggedIn() {\n return this.$store.state.isAuthenticated;\n }\n }\n};\n<\/code><\/pre>\nmapState<\/code> yard\u0131mc\u0131 fonksiyonu kullan\u0131labilir:<\/p>\nimport { mapState } from 'vuex';\n\nexport default {\n computed: {\n ...mapState({\n count: state => state.count,\n \/\/ Veya do\u011frudan string olarak anahtar ad\u0131n\u0131 vererek\n isAuthenticated: 'isAuthenticated' \n }),\n \/\/ Alternatif olarak, e\u011fer computed property ad\u0131 state anahtar\u0131yla ayn\u0131ysa\n ...mapState(['count', 'isAuthenticated'])\n }\n};\n<\/code><\/pre>\nmapState<\/code>, bile\u015fen i\u00e7inde birden fazla state \u00f6zelli\u011fine eri\u015firken kod tekrar\u0131n\u0131 azalt\u0131r ve daha temiz bir yap\u0131 sunar.<\/p>\nGetters<\/h3>\n
const store = new Vuex.Store({\n state: {\n todos: [\n { id: 1, text: 'Vuex \u00f6\u011fren', done: true },\n { id: 2, text: 'Makale yaz', done: false }\n ]\n },\n getters: {\n doneTodos: state => {\n return state.todos.filter(todo => todo.done);\n },\n doneTodosCount: (state, getters) => {\n return getters.doneTodos.length;\n },\n getTodoById: (state) => (id) => {\n return state.todos.find(todo => todo.id === id);\n }\n }\n});\n<\/code><\/pre>\n\/\/ Bir Vue bile\u015feni i\u00e7inde\nexport default {\n computed: {\n completedTodos() {\n return this.$store.getters.doneTodos;\n },\n specificTodo() {\n return this.$store.getters.getTodoById(1);\n }\n }\n};\n<\/code><\/pre>\nmapGetters<\/code> yard\u0131mc\u0131 fonksiyonu ile daha temiz bir eri\u015fim sa\u011flanabilir:<\/p>\nimport { mapGetters } from 'vuex';\n\nexport default {\n computed: {\n ...mapGetters([\n 'doneTodos',\n 'doneTodosCount'\n ])\n }\n};\n<\/code><\/pre>\nMutations<\/h3>\n
const store = new Vuex.Store({\n state: {\n count: 0\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n decrement(state) {\n state.count--;\n },\n add(state, amount) { \/\/ amount bir payload'd\u0131r\n state.count += amount;\n },\n setAuthentication(state, status) {\n state.isAuthenticated = status;\n }\n }\n});\n<\/code><\/pre>\nstore.commit()<\/code> metodunu kullan\u0131r\u0131z:<\/p>\n\/\/ Bir Vue bile\u015feni i\u00e7inde\nexport default {\n methods: {\n incrementCount() {\n this.$store.commit('increment');\n },\n addAmount(amount) {\n this.$store.commit('add', amount);\n },\n login() {\n this.$store.commit('setAuthentication', true);\n }\n }\n};\n<\/code><\/pre>\nmapMutations<\/code> yard\u0131mc\u0131 fonksiyonu ile daha k\u0131sa bir kullan\u0131m sa\u011flanabilir:<\/p>\nimport { mapMutations } from 'vuex';\n\nexport default {\n methods: {\n ...mapMutations([\n 'increment', \/\/ this.increment() olarak e\u015flenir\n 'decrement',\n 'add' \/\/ this.add(amount) olarak e\u015flenir\n ]),\n \/\/ Veya \u00f6zel isimle e\u015fleme\n ...mapMutations({\n addAmount: 'add' \/\/ this.addAmount(amount) olarak e\u015flenir\n })\n }\n};\n<\/code><\/pre>\nActions<\/h3>\n
context<\/code> objesi al\u0131r. Bu context<\/code> objesi, ayn\u0131 store \u00f6rne\u011finin metot ve \u00f6zelliklerine (state<\/code>, getters<\/code>, commit<\/code>, dispatch<\/code>) eri\u015fim sa\u011flar. Bu sayede, bir action i\u00e7inde ba\u015fka action’lar\u0131 dispatch edebilir veya mutation’lar\u0131 commit edebiliriz.<\/p>\nconst store = new Vuex.Store({\n state: {\n count: 0,\n userData: null,\n loading: false,\n error: null\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n setUserData(state, data) {\n state.userData = data;\n },\n setLoading(state, status) {\n state.loading = status;\n },\n setError(state, error) {\n state.error = error;\n }\n },\n actions: {\n asyncIncrement(context) {\n setTimeout(() => {\n context.commit('increment');\n }, 1000);\n },\n async fetchUser({ commit }) { \/\/ context objesini destructure edebiliriz\n commit('setLoading', true);\n commit('setError', null);\n try {\n const response = await fetch('https:\/\/api.example.com\/user');\n const data = await response.json();\n commit('setUserData', data);\n } catch (error) {\n commit('setError', 'Kullan\u0131c\u0131 verisi \u00e7ekilemedi.');\n } finally {\n commit('setLoading', false);\n }\n },\n loginUser({ commit, dispatch }, credentials) {\n \/\/ API \u00e7a\u011fr\u0131s\u0131 ile login i\u015flemi\n \/\/ Ba\u015far\u0131l\u0131 olursa commit('setAuthentication', true)\n \/\/ Sonra belki dispatch('fetchUser') gibi ba\u015fka bir action \u00e7a\u011fr\u0131labilir\n }\n }\n});\n<\/code><\/pre>\nstore.dispatch()<\/code> metodunu kullan\u0131r\u0131z:<\/p>\n\/\/ Bir Vue bile\u015feni i\u00e7inde\nexport default {\n methods: {\n triggerAsyncIncrement() {\n this.$store.dispatch('asyncIncrement');\n },\n loadUserData() {\n this.$store.dispatch('fetchUser');\n },\n handleLogin(credentials) {\n this.$store.dispatch('loginUser', credentials);\n }\n }\n};\n<\/code><\/pre>\nmapActions<\/code> yard\u0131mc\u0131 fonksiyonu ile daha k\u0131sa bir kullan\u0131m sa\u011flanabilir:<\/p>\nimport { mapActions } from 'vuex';\n\nexport default {\n methods: {\n ...mapActions([\n 'asyncIncrement',\n 'fetchUser'\n ]),\n \/\/ Veya \u00f6zel isimle e\u015fleme\n ...mapActions({\n loadUser: 'fetchUser' \/\/ this.loadUser() olarak e\u015flenir\n })\n }\n};\n<\/code><\/pre>\nVuex Kurulumu ve Basit Bir \u00d6rnek<\/h2>\n
npm install vuex --save\nveya<\/h2>\nyarn add vuex\n<\/code><\/pre>\n
store<\/code> klas\u00f6r\u00fc olu\u015fturulur ve i\u00e7ine index.js<\/code> dosyas\u0131 konulur. Bu dosya, Vuex store’unuzu i\u00e7erecektir.<\/p>\n\/\/ store\/index.js\nimport { createStore } from 'vuex'; \/\/ Vue 3 i\u00e7in createStore\n\nconst store = createStore({\n state: {\n count: 0\n },\n getters: {\n doubleCount: state => state.count * 2\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n add(state, amount) {\n state.count += amount;\n }\n },\n actions: {\n asyncIncrement(context) {\n return new Promise(resolve => {\n setTimeout(() => {\n context.commit('increment');\n resolve();\n }, 1000);\n });\n },\n asyncAdd({ commit }, amount) {\n return new Promise(resolve => {\n setTimeout(() => {\n commit('add', amount);\n resolve();\n }, 500);\n });\n }\n }\n});\n\nexport default store;\n<\/code><\/pre>\nmain.js<\/code> (Vue 3) veya main.js<\/code>\/app.js<\/code> (Vue 2) dosyas\u0131nda yap\u0131l\u0131r.<\/p>\n\/\/ main.js (Vue 3)\nimport { createApp } from 'vue';\nimport App from '.\/App.vue';\nimport store from '.\/store'; \/\/ Store'u import et\n\ncreateApp(App).use(store).mount('#app'); \/\/ .use(store) ile entegre et\n<\/code><\/pre>\n\n Saya\u00e7: {{ count }}<\/h2>\n