vuex
esenlikler arkadaşlar, bugün sizlere bir kaç örnekle vue.js ile uygulamamızın durum yönetimini nasıl yapacağımızı anlatacağım. bu anlatım çok detaylı olmayacak fakat okuduktan sonra bir çok işinizi rahatlıkla çözebileceksiniz. öncelikle, vuex’i nasıl kullanacağımızı anlatmaya başlamak için bilmemiz gereken bir kaç aracımız var. bunlar state, mutation, action ve store.
state
state, uygulamamızın belirtilen anda hangi verilere sahip olduğunu tuttuğumuz depomuz.
mutation
mutationlar ise state’i (depomuzu) güncellemek için kullandığımız işlev parçaları. bu işlevlerin tek görevi ilgili öznede bir değişim yaratmak.
action
actionlar, gerçek anlamda state management (durum yönetimi) için alınması gereken yolu belirtecek işlevlerimiz.
store
son olarak store ise bütün bu araçları bir arada tutan yapı.
state oluşturmak
ilk olarak, state oluşturabilmek için uygulamamızın varsayılan bir durumu olmalı. biz, kullanıcıya giriş yaptıracağımız basit bir store oluşturacağız.
sadece güncel state’i tanımladığımız store’umuzda kullanıcı bilgileri şu an için boş. kullanıcı bilgilerini güncelleyecek şey bir mutation olacak.
state’i güncellemek
bu mutasyonu da eklediğimizde artık store’umuz bu şekilde görünüyor. artık kullanıcı bilgisi state’e bir mutation aracılığıyla aktarılabiliyor. unutmayın, güncel state’i güncellediğimiz yer sadece mutasyonlar olmalı.
giriş yapacağımız action’u oluşturmadan önce, örnek bir yardımcı işlev belirtelim. sadece kafalarda karışıklık yaratmamak için :)
şimdi bu işlevi kullanarak action yazabiliriz.
store yönetimi
giriş yapmak için api’ye istek atan yardımcı bir işlev oluşturarak, login action’ının daha sade olmasını sağladık. bu bir kenara dursun, api’den aldığımız isteğin sonucuna göre uygulamanın state’indeki kullanıcı bilgisini de güncelledik. bu işleme örnekte de görüldüğü üzere “commit” adı veriliyor.
şimdi bunu store’u bir component’te kullanmayı deneyelim;
component ile ilişkilendirmek
bir anda bu kadar büyük bir kod bloğu görmek sizi korkutmasın, büyük bir kısmı HTML şablonu. bizim ilgimizi çeken yer ise computed property olan mapState ve submit metodu. mapState bizim için store’daki “user” state’ini component içinde kullanabilmemizi sağlamayı amaçlıyor. submit metodu ise şablondaki form tarafından tetikleniyor ve aynı mutation çağırmak için store tarafından bize sağlanan commit işlevini kullandığımız gibi, action çağırmak için de dispatch işlevini kullanıyoruz.
“login” action’ı başarılı bir şekilde tamamlandığı zaman, mapState güncel kullanıcı bilgisini şablona sağlayacak ve sonrasında giriş yapan kullanıcıyı şablonda göstermiş olacağız.
