Vue.js Computed Getter Setter Kullanımı
Hepinize merhaba dostlarım 😊. Yoğun yorucu, veri kurtarmalarla geçen bir haftanın içerisinden müsait bir gün bularak tekrardan sizlerin karşısına çıktım dostlarım 😊. Ve yavaştan hafta sonuna doğru yaklaşırken sizlere de kaldığımız yerden yani vuejs konusundan devam etmek ve sizlerin gelişimine katkıda bulunmak istiyorum 😊
Hatırlarsanız bir önceki makalemde sizlere "Vue.js Computed Kullanımı" konusundan bahsetmiştim. Özellikle ve özellikle filtreleme olaylarından tutun da KDV hesaplama kısmına kadar birçok yerde kullanılma olaylarından da bahsetmiştim. Okumayan dostlarım için linki buraya bırakıyorum. Şimdi içinizden şu sesi duyar gibiyim dostlarım.
Hocam bizce computed bu kadar kısa geçilen bişey değil gibi hissediyoruz. Resmen bizim için nimet niteliğinde bir konu oldu ve onca işimizi kolaylaştırdı. Bu makalede de bu konunun devamı niteliğinde bir şey seziyoruz. Az biraz da zorlayacak gibi ama zorlanmadan da gelişemeyiz 😉
Benim okuyucum beni tanır ciddi diyorum 😅. Aynı düşündüğünüz gibi dostlarım. Bizim için nimet olan konulardan birisi olan Computed üzerinde bu sefer de Getter ve Setter yapılarına değineceğiz. Şimdi bu nedir gelin buna ufaktan bir bakalım
Nedir Bu Getter ve Setter ? Zorunlu Mu ?
Eveeeet dostlarım. Artık yavaştan işin teorik kısmına giriyorum. Normal teorikten uzak bir teorik kısım diyebilirim buna 😅. Çünkü ezber mantığı anlatmak yerine işi pratikleştirip anlatmayı daha çok seviyorum 😊.
Şimdi dostlarım Getter adı üstünde de anlaşılacağı üzere GET, yani Türkçe karşılığı 'ALMAK' olan bu yapı bizim computed üzerinde bir olayı veya değişkeni return etme durumlarında kullanılıyor.
Örnek verecek olursak mesela bir tane computed oluşturdunuz varsayalım. Bunun içerisine getter ve setter olarak 2 ayrı yapı kurdunuz. Siz bu oluşturduğunuz computed ismini örnek veriyorum p taglerinin içerisine yazdığınızda sizin için getter yapısı tetiklenecek ve içerisine ne yazmışsanız artık o işlem tetiklenecektir. Tüm olay bu dostlarım 😊.
Şimdi ise gelelim setter kısmına
Setter konusunda da dostlarım bakacak olursak SET, yani Türkçe karşılığı 'AYARLAMAK' olan bu yapı ise dostlarım bizim oluşturduğumuz computed üzerinde veri değişikliği algılandığı zaman ne yapacağı konusunda son derece yardımcı oluyor.
Şimdi sizin aklına şu soru gelmiştir ben inanıyorum
Hocam normalde biz işte içerisine değişken attığımızda computed üzerinde nasıl deyim direk çalışıyor. Ekstra olarak hani get veya set olayını ne zamanlarda kullanabiliriz yani konu güzel Allah razı olsun iyi anlattınız ama kullanacağımız yerleri tam olarak bilemiyoruz
şeklinde aklınızda soru işaretleri vardır dostlarım biliyorum. Şimdi buna da ufak bir ışık tutmak istiyorum
Dostlarım biliyorum bir önceki videoda computed ile direkt veri değiştiğinde çalıştığını açık açık görmüştük. Ama dikkat ederseniz orada tek bir veriye bağlı olarak gerçekleşecek tek işlem yapıyorduk ve bunu return ediyorduk.
Bu işlemde ise get olayında hangi işlemler yapılacak, set olayında hangi işlemler yapılacak şeklinde ayarlamalar yapıp işleme göre ayarlama durumları gerçekleştirebiliyoruz. Buradan da zorunluluk durumu sizin projenizdeki duruma göre değişebiliyor dostlarım 😊.
Kodlama İşlemine Geçelim
Eveeet dostlarım. Artık konuyu kavradığımızda göre yavaştan yavaştan kodlama işlemine geçelim. Hemen proje çatımızı oluşturalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Computed Üzerinde Getter ve Setter Kullanımı | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Computed Üzerinde Getter ve Setter Kullanımı | MFSoftware Blog",
data: {}
});
</script>
</body>şeklinde kodlarımızı yazdık dostlarım. Şimdi örnek olarak
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Computed Üzerinde Getter ve Setter Kullanımı | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<label for="">Ürün Fiyat</label>
<br>
<input type="number" step="0.01" min="1" class="form-control" v-model="urn_fiyat">
<br>
<p>KDV'li Fiyat: {{ urunKdv }} ₺</p>
</div>
</div>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Computed Üzerinde Getter ve Setter Kullanımı | MFSoftware Blog",
data: {
urn_fiyat : 0,
kdv : 18,
},
computed : {
urunKdv : {
get(){
let kdv_li = parseFloat(this.urn_fiyat) + parseFloat(((this.urn_fiyat * this.kdv)) / 100);
return kdv_li;
},
set(newValue) {
this.urn_fiyat = newValue;
}
}
}
});
</script>
</body>şeklinde kodlarımızı yazdık dostlarım. Ekranımızı açtığımızda karşımıza gelecek olan çıktı şu şekilde olacaktır. Ben örnek olarak bir değer eklemiştim
şeklinde sonuç gelecektir dostlarım. Herhangi bir değişiklik olduğunda bunu algılayacak ve ekrana bastırma işlemini sorunsuz olarak gerçekleştirecektir 😊. Harici olarak yaptıracağınız yaptırmayacağınız işlemler tamamen size kalmış dostlarım 😊.
Eveeeet dostlarım. Bu makalemde sizlere elimden geldiğince dilim döndüğünce "Vue.js Computed Üzerinde Getter Setter Kullanımı" konusundan bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir anlıyorum. Özellikle öğrenme sürecinde bu ve bunun gibi durumlarla karşılaşmanız son derece normaldir. Bu durumda sizlerden yapmanızı istediğim tek şey her makalemde de değindiğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız" şeklinde olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer