Modern web uygulamalar\u0131, \u00f6zellikle tek sayfal\u0131k uygulamalar (SPA’lar), kullan\u0131c\u0131 aray\u00fcz\u00fcnde karma\u015f\u0131k etkile\u015fimler ve yo\u011fun veri ak\u0131\u015flar\u0131 bar\u0131nd\u0131r\u0131r. Bu karma\u015f\u0131kl\u0131k, uygulaman\u0131n farkl\u0131 bile\u015fenleri aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 ve senkronizasyonunu zorunlu k\u0131lar. Bir uygulaman\u0131n “durumu” (state), o anki verilerini ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirleyen her \u015feyi ifade eder. K\u00fc\u00e7\u00fck uygulamalarda bile\u015fenler aras\u0131 veri ak\u0131\u015f\u0131 prop’lar (yukar\u0131dan a\u015fa\u011f\u0131ya) ve olaylar (a\u015fa\u011f\u0131dan yukar\u0131ya) ile y\u00f6netilebilirken, uygulama b\u00fcy\u00fcd\u00fck\u00e7e bu y\u00f6ntemler yetersiz kal\u0131r ve “prop drilling” gibi sorunlara yol a\u00e7ar. Bu noktada, merkezi bir durum y\u00f6netimi k\u00fct\u00fcphanesine olan ihtiya\u00e7 ortaya \u00e7\u0131kar.<\/p>\n
Vue.js ekosistemi i\u00e7in tasarlanm\u0131\u015f resmi durum y\u00f6netimi k\u00fct\u00fcphanesi olan Vuex, bu sorunu zarif ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde \u00e7\u00f6zmek i\u00e7in tek bir merkezi depolama alan\u0131 (store) sa\u011flar. Vuex, t\u00fcm uygulaman\u0131z\u0131n durumunu tek bir yerde tutarak, bile\u015fenlerinizin bu duruma eri\u015fmesini ve onu de\u011fi\u015ftirmesini standart bir protokolle m\u00fcmk\u00fcn k\u0131lar. Bu makalede, Vuex’in temel prensiplerini, mimarisini, bile\u015fenlerini ve Vue.js uygulamalar\u0131n\u0131zda nas\u0131l etkili bir \u015fekilde kullan\u0131labilece\u011fini detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Uygulaman\u0131z\u0131n durumu, oturum a\u00e7m\u0131\u015f kullan\u0131c\u0131 bilgileri, sepet \u00f6\u011feleri, API’den gelen veriler, UI bile\u015fenlerinin g\u00f6r\u00fcn\u00fcrl\u00fck ayarlar\u0131 gibi bir\u00e7ok farkl\u0131 veriyi i\u00e7erebilir. Bu veriler, uygulaman\u0131n farkl\u0131 yerlerinde birden fazla bile\u015fen taraf\u0131ndan kullan\u0131labilir veya de\u011fi\u015ftirilebilir. Geleneksel y\u00f6ntemlerle bu verileri y\u00f6netmeye \u00e7al\u0131\u015fmak, a\u015fa\u011f\u0131daki sorunlara yol a\u00e7abilir:<\/p>\n
* Veri Senkronizasyonu Zorluklar\u0131:<\/strong> Bir bile\u015fende yap\u0131lan de\u011fi\u015fikliklerin di\u011fer ilgili bile\u015fenlere yans\u0131t\u0131lmas\u0131 karma\u015f\u0131k hale gelir. Vuex, bu sorunlar\u0131 \u00e7\u00f6zerek uygulamalar\u0131n\u0131z\u0131n daha \u00f6l\u00e7eklenebilir, bak\u0131m\u0131 daha kolay ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Merkezi bir depolama alan\u0131 ve kat\u0131 kurallar sayesinde, durum de\u011fi\u015fiklikleri her zaman izlenebilir ve anla\u015f\u0131labilir hale gelir.<\/p>\n Vuex, tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 prensibine dayan\u0131r ve d\u00f6rt ana bile\u015fenden olu\u015fur: State, Getters, Mutations ve Actions. Bu bile\u015fenler birlikte \u00e7al\u0131\u015farak uygulaman\u0131n durumunu y\u00f6netir.<\/p>\n Vuex, durumu y\u00f6netmek i\u00e7in kat\u0131 bir tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 modeli benimser:<\/p>\n 1. State:<\/strong> Uygulaman\u0131n temel verilerini bar\u0131nd\u0131r\u0131r. Bu d\u00f6ng\u00fc, durum de\u011fi\u015fikliklerinin izlenebilirli\u011fini ve \u00f6ng\u00f6r\u00fclebilirli\u011fini art\u0131r\u0131r.<\/p>\n Vuex’in kalbinde, t\u00fcm uygulaman\u0131z\u0131n durumunu bar\u0131nd\u0131ran tek bir merkezi depo (store) bulunur. Bu depo, uygulaman\u0131z\u0131n “tek do\u011fru kaynak” (single source of truth) noktas\u0131d\u0131r. T\u00fcm bile\u015fenler, ihtiya\u00e7 duyduklar\u0131 duruma bu depodan eri\u015fir.<\/p>\n \u015eimdi Vuex’in temel yap\u0131 ta\u015flar\u0131n\u0131 ve her birinin rol\u00fcn\u00fc daha yak\u0131ndan inceleyelim.<\/p>\n Tan\u0131m:<\/strong> \u00d6rnek Tan\u0131mlama:<\/strong><\/p>\n Eri\u015fim:<\/strong> Saya\u00e7: {{ $store.state.sayac }}<\/p>\n Ho\u015f Geldiniz, {{ $store.state.kullanici.ad }}!<\/p>\n <\/div>\n<\/template><\/code><\/pre>\n Daha temiz bir eri\u015fim i\u00e7in Saya\u00e7: {{ sayac }}<\/p>\n Ho\u015f Geldiniz, {{ kullanici.ad }}!<\/p>\n <\/div>\n<\/template>\n\n
\n* “Prop Drilling”:<\/strong> Verinin, asl\u0131nda ihtiyac\u0131 olmayan ara bile\u015fenler \u00fczerinden ge\u00e7irilmesi durumu. Bu, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131r\u0131r.
\n* Hata Ay\u0131klama Zorluklar\u0131:<\/strong> Hatalar\u0131n kayna\u011f\u0131n\u0131 bulmak zorla\u015f\u0131r \u00e7\u00fcnk\u00fc bir durum de\u011fi\u015fikli\u011finin nereden geldi\u011fini takip etmek g\u00fc\u00e7le\u015fir.
\n* \u00d6ng\u00f6r\u00fclemezlik:<\/strong> Uygulaman\u0131n durumunun ne zaman ve nas\u0131l de\u011fi\u015fece\u011fi belirsizle\u015fir.<\/p>\nVuex’in Temel Kavramlar\u0131<\/h3>\n
Tek Y\u00f6nl\u00fc Veri Ak\u0131\u015f\u0131 (Unidirectional Data Flow)<\/h4>\n
\n2. View (G\u00f6r\u00fcn\u00fcm):<\/strong> State’i g\u00f6r\u00fcnt\u00fcleyen Vue bile\u015fenleridir.
\n3. Actions:<\/strong> Kullan\u0131c\u0131 etkile\u015fimleri veya asenkron i\u015flemler sonucunda tetiklenir. State’i do\u011frudan de\u011fi\u015ftiremezler.
\n4. Mutations:<\/strong> State’i de\u011fi\u015ftiren tek yoldur. Actions taraf\u0131ndan \u00e7a\u011fr\u0131l\u0131rlar ve her zaman senkron olmal\u0131d\u0131rlar.<\/p>\nMerkezi Durum Deposu (Centralized State Store)<\/h4>\n
Vuex Mimarisi ve Bile\u015fenleri<\/h3>\n
State<\/h4>\n
State<\/code>, uygulaman\u0131z\u0131n temel verilerini i\u00e7eren JavaScript nesnesidir. Bir Vuex deposundaki state, Vue’nun reaktif sistemine entegre edilmi\u015ftir. Bu, state’teki bir de\u011fi\u015fiklik oldu\u011funda, bu state’i kullanan t\u00fcm Vue bile\u015fenlerinin otomatik olarak g\u00fcncellenece\u011fi anlam\u0131na gelir.<\/p>\n
\nUygulaman\u0131n t\u00fcm durumunu (verilerini) bar\u0131nd\u0131ran merkezi nesnedir.<\/p>\n\/\/ store\/index.js\nconst store = new Vuex.Store({\n state: {\n sayac: 0,\n kullanici: null,\n urunler: []\n }\n});<\/code><\/pre>\n
\nBir Vue bile\u015feni i\u00e7inde state’e this.$store.state<\/code> \u00fczerinden eri\u015febilirsiniz.<\/p>\n\n mapState<\/code> yard\u0131mc\u0131 fonksiyonunu kullanmak daha yayg\u0131nd\u0131r:<\/p>\n\n