Modern web uygulamalar\u0131, \u00f6zellikle tek sayfa uygulamalar\u0131 (SPA’lar), giderek daha karma\u015f\u0131k hale gelmektedir. Bu uygulamalar, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturan y\u00fczlerce hatta binlerce bile\u015fenden olu\u015fabilir. Bu bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131, ileti\u015fim ve uygulaman\u0131n genel “durumunu” (state) tutarl\u0131 bir \u015fekilde y\u00f6netmek, geli\u015ftiriciler i\u00e7in \u00f6nemli bir zorluk te\u015fkil eder. Durum y\u00f6netimi, uygulaman\u0131n herhangi bir an\u0131ndaki verilerini (\u00f6rne\u011fin, kullan\u0131c\u0131 bilgileri, sepet i\u00e7eri\u011fi, tema ayarlar\u0131, API’den \u00e7ekilen veriler vb.) merkezi ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde depolama, g\u00fcncelleme ve eri\u015fme s\u00fcrecidir.<\/p>\n
Vue.js gibi progresif bir JavaScript \u00e7er\u00e7evesiyle geli\u015ftirme yaparken, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalarda props ve emit olaylar\u0131 gibi yerle\u015fik mekanizmalar genellikle yeterli olur. Ancak uygulama b\u00fcy\u00fcd\u00fck\u00e7e, bile\u015fen hiyerar\u015fisi derinle\u015ftik\u00e7e ve birden fazla bile\u015fenin ayn\u0131 duruma eri\u015fmesi veya durumu de\u011fi\u015ftirmesi gerekti\u011finde bu yerle\u015fik \u00e7\u00f6z\u00fcmler yetersiz kalmaya ba\u015flar. “Prop drilling” (veriyi derinlemesine i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenlere props arac\u0131l\u0131\u011f\u0131yla aktarma) ve “event hell” (olaylar\u0131n karma\u015f\u0131k bir \u015fekilde yukar\u0131ya do\u011fru yay\u0131lmas\u0131) gibi sorunlar ortaya \u00e7\u0131kar. Bu durum, kodun okunabilirli\u011fini, s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve hata ay\u0131klama s\u00fcrecini olumsuz etkiler. \u0130\u015fte bu noktada, Vue.js ekosisteminde merkezi durum y\u00f6netimi k\u00fct\u00fcphaneleri devreye girer. Bu makalede, Vue.js uygulamalar\u0131nda durum y\u00f6netimi i\u00e7in kullan\u0131lan farkl\u0131 yakla\u015f\u0131mlar\u0131, \u00f6zellikle Vuex ve Pinia gibi pop\u00fcler k\u00fct\u00fcphaneleri derinlemesine inceleyecek, avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve hangi senaryolarda tercih edilmeleri gerekti\u011fini tart\u0131\u015faca\u011f\u0131z.<\/p>\n
Vue.js, bir uygulaman\u0131n durumunu y\u00f6netmek i\u00e7in \u00e7e\u015fitli yerle\u015fik mekanizmalar sunar. Bu mekanizmalar, uygulaman\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na ve bile\u015fenler aras\u0131 ileti\u015fim ihtiya\u00e7lar\u0131na g\u00f6re farkl\u0131 senaryolarda kullan\u0131labilir.<\/p>\n
Vue.js’in en temel ve yayg\u0131n durum y\u00f6netimi mekanizmas\u0131, bile\u015fenler aras\u0131nda veri aktar\u0131m\u0131n\u0131 sa\u011flayan props (\u00f6zellikler) ve olaylard\u0131r. Props, \u00fcst bile\u015fenden alt bile\u015fene do\u011fru tek y\u00f6nl\u00fc bir veri ak\u0131\u015f\u0131 sa\u011flar. Alt bile\u015fen, kendisine iletilen prop de\u011ferlerini okuyabilir ancak do\u011frudan de\u011fi\u015ftiremez. Bir alt bile\u015fenin \u00fcst bile\u015fendeki bir durumu de\u011fi\u015ftirmesi gerekti\u011finde ise, Avantajlar\u0131:<\/strong> Basit ve anla\u015f\u0131lmas\u0131 kolayd\u0131r, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in yeterlidir, Vue’nin temel prensiplerine uygundur. Vue 3 ile birlikte daha da geli\u015ftirilen Avantajlar\u0131:<\/strong> “Prop drilling” sorununu ortadan kald\u0131r\u0131r, derinlemesine i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r, global veya yar\u0131-global durumlar i\u00e7in kullan\u0131labilir. Vue 3’\u00fcn Composition API’si, reaktif mant\u0131\u011f\u0131 yeniden kullan\u0131labilir fonksiyonlar halinde soyutlama imkan\u0131 sunar. Bu “composables” olarak adland\u0131r\u0131lan fonksiyonlar, Avantajlar\u0131:<\/strong> Kodu daha mod\u00fcler ve yeniden kullan\u0131labilir hale getirir, mant\u0131ksal olarak ilgili kod bloklar\u0131n\u0131 bir arada tutar, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli global durumlar i\u00e7in esnek bir \u00e7\u00f6z\u00fcm sunar. Vuex, Vue.js uygulamalar\u0131 i\u00e7in resmi durum y\u00f6netimi k\u00fct\u00fcphanesidir ve Flux mimarisinden esinlenilmi\u015ftir. B\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k uygulamalarda bile\u015fenler aras\u0131 durumu merkezi ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde y\u00f6netmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Vuex, uygulaman\u0131n t\u00fcm durumunu tek bir depoda (store) tutar ve bu depoya eri\u015fimi ve g\u00fcncellemeleri kat\u0131 kurallarla kontrol eder.<\/p>\n Vuex, Vue.js’in pop\u00fclaritesi artt\u0131k\u00e7a ve geli\u015ftirilen uygulamalar b\u00fcy\u00fcd\u00fck\u00e7e ortaya \u00e7\u0131kan durum y\u00f6netimi sorunlar\u0131na bir \u00e7\u00f6z\u00fcm olarak geli\u015ftirilmi\u015ftir. Birden fazla bile\u015fenin ayn\u0131 veriye ba\u011f\u0131ml\u0131 oldu\u011fu veya ayn\u0131 veriyi de\u011fi\u015ftirmesi gerekti\u011fi senaryolarda, Vuex merkezi bir “ger\u00e7e\u011fin tek kayna\u011f\u0131” (single source of truth) sa\u011flayarak veri tutars\u0131zl\u0131\u011f\u0131n\u0131 \u00f6nler. Bu merkeziyet, uygulaman\u0131n durumunun her zaman \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 ve hata ay\u0131klaman\u0131n kolayla\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n Vuex, bir dizi temel kavram etraf\u0131nda in\u015fa edilmi\u015ftir: Vuex bir Vue uygulamas\u0131na eklendi\u011finde, \u00d6rnek Yap\u0131:<\/strong><\/p>\n Bile\u015fen i\u00e7inde eri\u015fim:<\/p>\n Count: {{ $store.state.count }}<\/p>\n Double Count: {{ $store.getters.doubleCount }}<\/p>\n emit<\/code> olaylar\u0131 kullan\u0131l\u0131r. Alt bile\u015fen bir olay yayar ve bu olay\u0131 dinleyen \u00fcst bile\u015fen, kendi durumunu g\u00fcncelleyebilir. Bu model, “tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131” prensibini destekleyerek uygulaman\u0131n durumunun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\nDezavantajlar\u0131:<\/strong> Bile\u015fen hiyerar\u015fisi derinle\u015ftik\u00e7e “prop drilling” sorununa yol a\u00e7ar (verinin birden fazla ara bile\u015fen \u00fczerinden ge\u00e7irilmesi), karma\u015f\u0131k ileti\u015fim senaryolar\u0131nda olaylar\u0131n y\u00f6netimi zorla\u015f\u0131r, global duruma eri\u015fim sa\u011flamaz.<\/p>\nProvide\/Inject API’si<\/h3>\n
provide<\/code> ve inject<\/code> API’si, “prop drilling” sorununa alternatif bir \u00e7\u00f6z\u00fcm sunar. Bir \u00fcst bile\u015fen, provide<\/code> kullanarak bir de\u011feri veya reaktif bir nesneyi t\u00fcm alt bile\u015fenlerine (ne kadar derin olurlarsa olsunlar) sa\u011flayabilir. Daha sonra herhangi bir alt bile\u015fen, inject<\/code> kullanarak bu sa\u011flanan de\u011feri en yak\u0131n \u00fcst bile\u015fenden alabilir. Bu mekanizma, bile\u015fen a\u011fac\u0131n\u0131n herhangi bir yerindeki bir bile\u015fenin, \u00e7ok daha yukar\u0131daki bir \u00fcst bile\u015fen taraf\u0131ndan sa\u011flanan duruma eri\u015fmesini sa\u011flar. \u00d6zellikle Composition API ile birlikte reaktif de\u011ferler veya hesaplanm\u0131\u015f \u00f6zellikler sa\u011flamak, bu API’yi daha da g\u00fc\u00e7l\u00fc k\u0131lar.<\/p>\n
\nDezavantajlar\u0131:<\/strong> Hangi bile\u015fenin hangi de\u011feri sa\u011flad\u0131\u011f\u0131n\u0131 ve hangisinin ald\u0131\u011f\u0131n\u0131 takip etmek zorla\u015fabilir (\u00f6zellikle b\u00fcy\u00fck uygulamalarda), DevTools entegrasyonu s\u0131n\u0131rl\u0131d\u0131r, merkezi bir durum deposu sa\u011flamaz, daha karma\u015f\u0131k senaryolar i\u00e7in yeterli olmayabilir.<\/p>\nReaktif Kompozisyonlar (Custom Composables)<\/h3>\n
ref<\/code>, reactive<\/code>, computed<\/code> gibi reaktivite API’lerini kullanarak kendi i\u00e7 durumlar\u0131n\u0131 y\u00f6netebilir ve bu durumu bile\u015fenler aras\u0131nda payla\u015fabilir. \u00d6rne\u011fin, bir useCounter<\/code> composable’\u0131, bir say\u0131c\u0131 de\u011ferini ve bunu art\u0131rma\/azaltma fonksiyonlar\u0131n\u0131 i\u00e7erebilir. Bu composable, farkl\u0131 bile\u015fenlerde tekrar tekrar kullan\u0131labilir ve her kullan\u0131m kendi ba\u011f\u0131ms\u0131z durumuna sahip olabilir. Ancak, global bir durumu y\u00f6netmek i\u00e7in de createGlobalState<\/code> (VueUse gibi k\u00fct\u00fcphanelerle) veya basit bir reactive<\/code> nesnesini d\u0131\u015fa aktararak kullan\u0131labilir.<\/p>\n
\nDezavantajlar\u0131:<\/strong> B\u00fcy\u00fck ve karma\u015f\u0131k global durumlar i\u00e7in merkezi bir y\u00f6netim veya DevTools deste\u011fi sunmaz, durum g\u00fcncellemelerinin takibi zorla\u015fabilir, \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan s\u0131n\u0131rl\u0131 kalabilir.<\/p>\nGeleneksel \u00c7\u00f6z\u00fcm: Vuex<\/h2>\n
Vuex Nedir ve Neden Ortaya \u00c7\u0131kt\u0131?<\/h3>\n
Vuex’in Temel Kavramlar\u0131 ve Mimarisi<\/h3>\n
\n* State:<\/strong> Uygulaman\u0131n t\u00fcm reaktif durumunu bar\u0131nd\u0131ran merkezi nesnedir. Bile\u015fenler bu duruma do\u011frudan eri\u015femez, getters<\/code> arac\u0131l\u0131\u011f\u0131yla okur.
\n* Getters:<\/strong> State’ten t\u00fcretilmi\u015f durumlar\u0131 (computed properties gibi) sa\u011flayan fonksiyonlard\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131 listesinden sadece aktif kullan\u0131c\u0131lar\u0131 filtrelemek i\u00e7in bir getter kullan\u0131labilir.
\n* Mutations:<\/strong> State’i de\u011fi\u015ftiren senkron fonksiyonlard\u0131r. Vuex’te state’i de\u011fi\u015ftirmenin tek yolu mutation’lar\u0131 \u00e7a\u011f\u0131rmakt\u0131r. Her mutation bir t\u00fcr (type) ve bir payload (veri) al\u0131r. Bu k\u0131s\u0131tlama, state’teki her de\u011fi\u015fikli\u011fin izlenebilir ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.
\n* Actions:<\/strong> Asenkron i\u015flemleri (API \u00e7a\u011fr\u0131lar\u0131, zamanlay\u0131c\u0131lar vb.) ger\u00e7ekle\u015ftiren fonksiyonlard\u0131r. Actions, state’i do\u011frudan de\u011fi\u015ftiremez; bunun yerine mutation’lar\u0131 \u00e7a\u011f\u0131rarak state’i g\u00fcncellerler. Actions, birden fazla mutation’\u0131 s\u0131rayla \u00e7a\u011f\u0131rabilir veya di\u011fer action’lar\u0131 tetikleyebilir.
\n* Modules:<\/strong> B\u00fcy\u00fck uygulamalarda store’u daha y\u00f6netilebilir par\u00e7alara b\u00f6lmek i\u00e7in kullan\u0131l\u0131r. Her mod\u00fcl kendi state, getters, mutations ve actions’a sahip olabilir. Bu, kodun organizasyonunu ve okunabilirli\u011fini art\u0131r\u0131r.<\/p>\nVuex ile \u00c7al\u0131\u015fmak: \u00d6rnekler ve En \u0130yi Uygulamalar<\/h3>\n
store<\/code> nesnesi Vue uygulamas\u0131n\u0131n prototipine eklenir ve t\u00fcm bile\u015fenler this.$store<\/code> arac\u0131l\u0131\u011f\u0131yla eri\u015febilir. Composition API ile useStore<\/code> hook’u kullan\u0131larak daha modern bir eri\u015fim sa\u011flan\u0131r.<\/p>\n\/\/ store\/index.js\nimport { createStore } from 'vuex';\n\nexport default createStore({\n state: {\n count: 0,\n user: null\n },\n getters: {\n doubleCount: state => state.count * 2,\n isAuthenticated: state => !!state.user\n },\n mutations: {\n increment(state) {\n state.count++;\n },\n setUserData(state, payload) {\n state.user = payload;\n }\n },\n actions: {\n async fetchUser({ commit }) {\n const response = await fetch('\/api\/user');\n const userData = await response.json();\n commit('setUserData', userData);\n },\n incrementAsync({ commit }) {\n setTimeout(() => {\n commit('increment');\n }, 1000);\n }\n },\n modules: {\n \/\/ auth: authModule,\n \/\/ products: productsModule\n }\n});<\/code><\/pre>\n\n