Farklı vuex modüllerinde veri alışverişi nasıl yapılır ?
Bir önceki blog yazısında büyük proje’lerde vuex modüllerinin kullanılmasının öneminden bahsetmiştik.
Bu blog yazısında ise bu vuex modülleri arasında nasıl veri alışverişi yapabileceğimizi anlatacağım.
Vuex modüllerinde işlemler yaparken aşağıdaki gibi senaryolar ile karşılabiliriz:
- Actions içerisinde başka bir modülün state’lerine erişip değişkenlerini kullanma
- Actions içerisinde başka bir modüldeki verileri değiştirmek, silmek veya eklemek için bu modülün mutations’larına kullanma
- Mutation içerisinde başka bir modülün state’lerini kullanma
- Mutation içerisinde başka bir modülün mutationlarını kullanma
- Getters içerisinde başka bir modülün state’lerini kullanma
- Getters içerisinde başka bir modülün getters’lerini kullanma
Yukarıdaki senaryoları örnekler üzerinde uygulayacağız.
Actions içerisinde başka bir modülün state’lerine erişip değişkenlerini kullanma
Bir filmi bookmark’e eklemek isteğimizde movies modülündeki addMovieBookmark action’unu kullanmaktayız.Filmi bookmark’e eklemek için movieID ile email gerekmektedir.Fakat kullanıcının email adresi auth modülünde tutulmaktadır. Bu api isteğini yapabilmek için auth modülündeki state’lere erişerek email adresine almamız gerekmektedir. auth modülündeki email adresine erişmek için rootState kullanıyoruz.
rootState ile farklı bir modüldeki state’lere erişebiliriz.
Actionsların başka bir modüldeki verileri değiştirmek,silmek veya eklemek için bu modülün mutationlarına kullanma
Movies modülündeki addMovieBookmark action’unu kullanarak bir filmi bookmark’e eklerken bir hata ile karşılaştığında kullanıcıya bir uyarı veya hata mesajı göstermemiz gerekiyor. Hata veya uyarı ile ilgili bilgileri de notifications modülünde tutmaktayız.
Dolayısıyla notification modülündeki setNotification mutation’unu kullanarak yeni bir notification oluşturacağız.
Aşağıda görüldüğü gibi notification modülündeki setNotification mutation’una erişmek için commit’te 3. bir arguman olarak { root: true } ekledik.
Mutationların içerisinde başka bir modülün state’lerini kullanma
Movies modülündeki addMovieBookmark action’unu kullanarak bir filmi bookmark’e ekledikten sonra aynı zamanda vuexteki bookmarks durumunu değiştirmemiz gerekiyor.
Filmin bookmark durumunu değiştirmek için changeMovieBookmarkStatus mutation’unu kullanmaktayız. Bir filmin bookmark durumunu vuex’ten değiştirmek için bookmark’e eklenmiş filmin email adresi ile kullanıcının email adresinin aynı olup olmadığını kontrol etmemiz gerekiyor.
Dolayısıyla changeMovieBookmarkStatus mutation’una o kullanıcının email adresini de göndermemiz gerekiyor.
changeMovieBookmarkStatus mutation’una filme eklenen bookmark email ve kullanıcının email adresini auth modülünden alarak gönderdik.
Mutations’ların içerisinde başka bir modülün mutationlarını kullanma
changeMovieBookmarkStatus mutation’unu kullanarak bir filmin bookmark durumunu değiştirmek istediğimizde eğer ki bu filmin email adresi ile kullanıcının email adresi farklı ise bookmark durumunu vuex’ten değiştirmememiz gerekiyor ve aynı zamanda kullanıcıya bir uyarı mesajı göstermemiz gerekiyor.
Fakat uyarı mesajları ile ilgili bilgiler notifications modülünde tutulmamaktadır.Dolayısıyla changeMovieBookmarkStatus içerisinden notification modülündeki setNotification mutation’unu kullanmamız gerekiyor.
Dolayısıyla setNotification modülüne erişebilmek için de bir arguman olarak commit’i changeMovieBookmarkStatus’a göndermemiz gerekiyor.
changeMovieBookmarkStatus mutation’unda data.commit diyerek setNotification mutation’unu kullandık.
Getters içerisinde başka bir modülün state’lerini kullanma
Bir getters methodunda başka bir modülün state’lerini kullanmak için getters methodumuza 2 argument daha eklememiz gerekiyor: getters ve rootState
Aşağıdaki örnekteki gibi 2 argumanı ekledikten sonra rootState ile auth modülüne erişerek kullanıcının email adresini aldık ve işledik.
Getters içerisinde başka bir modülün getters’lerini kullanma
Kullanıcının profilinin gösterildiği sayfa’da kullanıcının bilgilerini ve favori filmlerini göstermek istiyoruz. Bunu işlemi yapabilmek için movies ve auth modüllerindeki bilgileri kullanmamız gerekiyor.
Bir getters methodunda başka bir modülün getters’lerini kullanmak için getters methodumuza 3 argument daha eklememiz gerekiyor: getters, rootState ve rootGetters
Aşağıdaki örnekteki gibi getters, rootState ve rootGetters argumanlarını ekledikten sonra rootGetters ile movies modülündeki getBookmarkedMovies eriştik ve getters methodunu kullandık.
Bu blog yazısı ile ilgili olarak hazırladığım örnek proje’yi github hesabımda, demo’yu da netlify’da yayınladım..
