Vee-Validate (v4) isSubmitting çalışmıyor(!)
Kısa yazmayı beceremeyen biri olarak kendimi zorlayacağım ve bu yazıyı çoook kısa tutmaya çalışacağım. Öncelikle belirteyim ki front-end uzmanı değilim. Kendi projem için Vue-CLI ile oluşturdupum bir arayüz hazırlıyorum. Merak edenler için backend olarak Laravel kullanıyorum.
Projede Vue (v3), Vuex (v4) ve Vee-Validate (v4) kullanıyorum. Vee dökümanını incelediğimde form gönderilirken tetiklenen “isSubmitting” state’i sunduğunu gördüm. Tam da aradığım bir şeydi. Böylece kendim ayrıca bir state tutmama gerek kalmıyordu ki öncesinde hep öyle yapıyordum.
Dökümandaki örnek şu şekildeydi;
Satır 17 olan kısımda API çağrımızı yapabiliyoruz ve default false olan isSubmitting state’i bu esnada true oluyor. Benim kodum şu şekildeydi:
Görüldüğü üzere Vee’nin sunduğu handleSubmit metoduna bir callback yazıp orada Vuex ile oluşturduğum auth modülünün login action’unu çağırıyorum. Fakat bu şekildeyken isSubmitting hiç true olmuyor. Sürekli false kalıyor.
Bunun sebebi Javascript’in asenkron yapısı. Yazının başında da belirttiğim üzere front-end uzmanı değilim. O nedenle yanlış kelimelerle ifade ediyor olabilirim. JS’in asenkron yapısı derken şunu kast ediyorum; JS’de bir methodun yaptığı iş uzun sürüyorsa, mesela bir api çağrısı yapıyorsanız bu başka bir adrese istek yapıp ondan cevap almanız demek ki oldukça uzun sürebilir; JS bu fonksiyonu çağırdığınız yerde işlemin bitmesini beklemez. O hemen alt satırdan devam eder. Sizin işleminiz asenkron bir şekilde vazifesini bitirip yapacağı bir iş tanımlanmışsa o zaman yapmaya çalışır. Halbuki mesela PHP’de öyle değildir. PHP’de o api çağrısını yapacak olan kod işini bitirip sonucunu alana kadar sizi bekletir.
İşte doğası gereği asenkron çalışan JS ben store.dispatch(…) dediğim işlem uzun sürsede hemen bir alt satıra geçtiği için isSubmitting hemen hiç true kalamıyor. İvedilikle false oluyor.
Bunu önlemek için daha doğrusu JS’e senkron iş yaptırabilmek için async / await kavramlarını kullanmak gerekiyor. Bunu anlamak için de promise kavramını öğrenmek gerekiyor. Bu üç kelime JS için çok önemli olduğundan iyice öğrenmek adına Google’da benim bu yazıdan daha düzgün bir şekilde anlatan bir kaynak bulmanızı tavsiye ederim.
Kısaca ifade etmem gerekirse JS’de bir fonksiyonun neticesi tamamlanana kadar alt satıra geçmesini engellemek için async ifadesi ile o methodun bir promise döndüreceğini belirtmiş oluyorsunuz. Bu sayede fonksiyonun içerisinde işlemin sonucu gelene kadar o satırda beklemesini istediğiniz ifadenin başına await yazmanız yetiyor. Ben şöyle yazdım:
Vee’nin sunduğu handleSubmit metodu bir callback istediği için buraya yazdığım methodun başına async ifadesini koydum.
İçeride de store.dispatch(..) yaptığımı ifadenin başına “await” yazarak JS’in bu method işini bitirene kadar alt satıra geçmemesini sağladım.
Burada kullandığım auth/login action’u bir promise döndürdüğü için kodum düzgün çalıştı ve bu method işini bitirene kadar isSubmitting true kaldı.
Bu da auth modülü. store.dispatch(‘auth/login’) dedigimizde burası çalışıyor. Burada kullandığım api bir axios servisi olduğu için doğal olarak bir “promise” döndürüyor.