Vuex Nedir, Neden ve Nasıl Kullanılır?
Vuex: Uygulamalarımızdaki data yönetim paradigmasıdır. İçerisinde bulundurduğu çekirdek konseptlerin iç içe geçmiş haline Vuex denir.
Vuex kullanarak ‘Login’ işlemlerini nasıl yapacağımızı anlatmak amacı ile bir YouTube video serisi hazırladım, izlemek isterseniz; https://www.youtube.com/watch?v=OD9jFkHaHkA
Vuex, 5 çekirdek konseptten (State, Getters, Mutations, Actions, Modules) oluşmaktadır fakat bunu 4+1 (State, Getters, Mutations, Actions + Modules) olarak adlandırmak daha doğru olur diye düşünüyorum. Her bir konsepti ayrı ayrı anlatacağım, anlatımlarımdan sonra neden 4+1 olarak ifade ettiğimi çok daha iyi anlayacağınızı umuyorum.
Uygulamalarımızda Neden Vuex Kullanıyoruz ?
Genellikle uygulamalarımızda data’yı yönetmek zor ve çok önemlidir. Data’yı güvenli tutabilmek için data’nın SSOT (Single Source of Truth) olması gerekmektedir. SSOT ile data’yı tek bir merkezi noktadan yönetebilme şansına sahip oluyoruz, tüm güncelleme işlemlerini bu şekilde yapmak en sağlıklı yöntemdir. Bu sayede data ‘unidirectional (tek yönlü)’ şekilde güncellemeler yapabiliyoruz, ‘unidirectional’ güncellemeler de data’nın SSOT bir yapıya sahip olmasını sağlayan etkenlerdendir.
Vuex’in en güzel yanlarından bir tanesi ise uygulamamızdaki tüm component’lar data’ya istediği anda ulaşabiliyor ve istediği zaman data üzerinde değişiklik yapabiliyor olmasıdır. Değişiklikleri yapmak istediğimiz component’ta bir ‘action’ veya ‘mutation’ dispatch ederek olayın gerçekleşmesini sağlayabiliriz.
Bazen her birimiz “acaba bu yaptığım şey doğru mu?” diye düşünmeden edemiyoruz, Vuex kullanarak yaptığımız bu güncelleme vb. işlemlerden sonra böyle bir soruyu kendimize sormaya gerek kalmıyor, çünkü doğru yöntemi kullanmış oluyoruz. :)
Vuex’in Yapısı ve Çalışma Mantığı Nedir?
Hadi gelin yukarıdaki yapıyı biraz anlamaya çalışalım, asla karışık geleceğini düşünmeyin. Aşağıda kod yazarak da bu yapının ne olduğunu, nasıl çalıştığını anlatıyor olacağım.
State ile başlayalım, component’larımızda kullanmak üzere hazırlayacağımız bir objedir.
Vue Component, State’e göre oluşturulmaktadır. Şekilden de anlayacağımız üzere Vue Component “reactive”’dir. Ne zaman ki State üzerinde değişiklik olur Vue Component o zaman yeniden “render” edilir.
Action, Vue Component üzerindeki bir method yardımı ile dispatch edilmektedir.
Mutation, Action’ın kendi üzerinde bir tane commit yapması ile birlikte Mutation’a gelir ve burada gerekli değişiklikler yapılır ve State üzerinde değişiklik gerçekleşiyor.
Vuex ile Kodlama
Uygulamamızın bulunduğu dizine sol tarafta görülen “store” klasörünü ve “index.js” dosyasını ekleyerek kollarımızı sıvayalım.
Vuex’i uygulamamıza dahil edebilmek için “index.js” dosyamızın içerisine “Vue & Vuex” import işlemlerini yapmamız gerekmekte ve “Vue.use(Vuex)” kod satırını yazarak Vue’ya Vuex plugin’ini kullanması gerektiğini söylemiş oluyoruz.
Vuex’i kullanacağımızı uygulamaya bildirdikten sonra store yapımızı kurmaya başlayabiliriz. “state, getters, mutations ve actions” için boş birer obje oluşturuyoruz ve bunları bir store içerisine dahil ediyoruz.
Hazırlamış olduğumuz “Store” yapısını kullanabilmek için “main.js” dosyamızın içerisine sol tarafta işaretlemiş olduğum değişiklikleri eklemeliyiz.
“state” objemiz üzerinde birkaç değişiklik yaptık.
Peki “state” objemiz üzerinde tanımladığımız data’ları nasıl component’ta çağırıp kullanacağız?
“App.vue” component’ımıza “vuex” içerisindeki “mapState” methodunu import ediyoruz ve “computed” içerisinde de uygulamaya tam olarak şunu yaptırıyoruz; “State’e git ve ‘message&username’ data’larını bana getir. Son olarak da “template” içerisinde “message ve username” data’larını birer “computed property” gibi yazabiliyoruz.
Tarayıcımızı açtığımız zaman “State”’te tanımlı olan data’larımızı “App.vue” component’ında kullanabildiğimizi gördük.
Peki, ben “message&username” data’larını birden fazla kez kullanmak istiyorsam ne yapmalıyım? “Template” içerisindeki “h4” kod satırını bir kez daha yazarak bu işlemi gerçekleştirebiliriz fakat bizler için doğru bir kullanım olmaz tam da bu noktada “Getters” konseptine ihtiyaç duyuyoruz.
“getters” objesinin içerisine “welcomeMessage” methodunu tanımladık ve “state” parametresi alacağını belirttik. Burada kafanızın karışmasını istemiyorum ve bir açıklama yapmak istiyorum; parametre olarak yazdığımız “state” tanımladığımız “state” objesini temsil etmemektedir. “State” yapısını temsil etmektedir yani bizler parametre olarak “x” dahi yazsak sorun olmadan kullanabilirdik. Son olarak da method içerisinde return işlemimizi gerçekleştiriyoruz.
“App.vue” dosyamızın içerisinde de birkaç değişikliğe gitmemiz gerekiyor. İlk olarak “mapGetters” methodunu import ettikten sonra “computed” içerisinde methodumuzu çağırıyor ve kullanmak istediğimiz method’ları data’ları çağırıyoruz. “index.js” içerisinde yazdığımız “welcomeMessage” methodunu “Template” içerisinde kullanarak bir önceki örnekte anlatmış olduğum çıktının birebir aynısını almış oluyoruz. Fakat birden fazla kez kullanmak istediğimizde “State”’te olduğu gibi her satırda tüm data’ları çağırmak yerine tek bir method çağırarak aynı sonucu görebiliyoruz.
Peki bir adım daha ileri gidelim ve bize gelen bu “username” değerini istediğimiz zaman değiştirebilelim.
Bu noktada “mutations” ile “acitons”’ı bir arada anlatacağım. “mutations” içerisinde “setUsername” adında bir method tanımlıyoruz parametre ile gelecek “name” değerini “state” içerisinde “username”’e eşitliyoruz. “actions” tarafında ise “mutations”’a commit yapabilmek için bir method tanımlıyoruz. “App.vue” dosyasından bir “name” parametresi geleceğini söylüyoruz ve commit ile “setUsername”’i “name” parametresi ile birlikte tetiklemiş oluyoruz. Bu işlemlerin sonucunda da “State” içerisindeki “username” alanı değişmiş oluyor.
Son olarak da “App.vue” içerisinde birkaç değişikliğe ihtiyacımız var, yeni bir “username” değeri alabilmek ve bu değeri aldıktan sonra güncelleme işlemini yapabilmek için “Template” alanında “input&button” yapılarından yardım alıyoruz. “Script” tarafında ise ilk olarak “mapActions” methodunu import ediyoruz. “Update Username” butonuna basıldığı anda “updateUsername” methodu tetiklenmiş olacak ve “mapActions” içerisindeki “updateUsername” methoduna “name” parametresini de göndererek gerekli tetiklenme işlemi tanımlanmış oluyor. Tetiklenme sonrası gerçekleşen işlemleri hemen bir üst paragrafta zaten anlatmıştık. Tüm bu işlemlerden sonra dinamik bir yapıya da sahip olmuş olduk.
Uygulamalarımıza “Vuex”’i neden ve nasıl ekleyeceğiz gibi soruların cevabını bu yazımda sizlere anlatmaya çalıştım umarım faydası olur. Hadi gelin uygulamamızın ne durumda olduğunu aşağıda izleyelim sonrasında ise yazımın başlangıcında belirtmiş olduğum 4+1 konseptini biraz daha detaylı anlatmaya çalışayım.
4 + 1 Konsepti Nedir?
Aslında Vuex yapısını şuan tek bir eksik ile öğrenmiş oldunuz. Eksiğimiz ise; “Modules” konsepti. Peki nedir bu “modules”? Vuex’i uygulamamıza import ettikten sonra store yapısını nasıl kuracağımızı anlatmış idim. Fakat o kurduğumuz store yapısının bir eksiği vardı o da; yalnızca bir adet store tanımlaması yapabilmemiz. Uygulamalarımız büyüdükçe kullanmamız gereken store yapısının sayısı da doğru orantılı olarak çoğalacaktır.
Uygulamamız içerisindeki store yapımızı sol taraftaki gibi bir “modules” objesi içerisine alarak ve her store’u da alt bir obje ile tanımlayarak uygulamamız içerisinde birden fazla store tanımlayabilir ve kullanabilir duruma geliyoruz. Artık hem “user” hem de “cart” objelerimiz adına birer store yapımız bulunmakta, dilediğimiz zaman importunu yaptığımız her component’ta bu iki store üzerinden veri çekebilir, güncelleme işlemleri yapabiliriz.
Vuex hakkında şuan için sizlere anlatabileceklerim bunlar :) Temel yapıyı, neden kullanmamız gerektiğini ve nasıl kullanmamız gerektiğini elimden geldiğince uygulamalı bir şekilde sizlere anlatmaya çalıştım. Uygulamalarınızın içerisine Vuex’i dahil ettiğinizde siz de işlerin çok daha kolaylaştığını ve çok daha düzenli olduğunu fark edeceksiniz. İyi kodlamalar diliyorum. :)
