Getting $_REQUEST (like POST and GET) as JSON with PHP

Getting $_REQUEST (like POST and GET) as JSON with PHP

  Ekim 02, 2021    Gökhan Krl

---

 

JSON is the most practical and fastest way to get data. PHP provides encode and decode feature for JSON object. However, you cannot directly fetch data as application-json.

That's why you can't fetch data with the JSON standard over $_GET and $_POST. We will use the input that PHP provides for I/O to get the data.

file_get_contents('php://input')

Now let's expand this a little more and assume that the incoming data is JSON.

json_decode(file_get_contents('php://input'), true);

The above process will take the data when we receive JSON data and convert it to PHP Array, and if the incoming data does not come as JSON, it will return null. So we can now try this process on a Router.

function getJSON()
{
    $jsonData = json_decode(file_get_contents('php://input'), true);
    return $jsonData ?? [];
}

Now you can get the data as JSON via getJSON() just as we get the data via $_POST and $_GET.

If you want, we can also define and use the data globally as we receive it via $_POST or $_GET. For this:

// index.php
$jsonData = json_decode(file_get_contents('php://input'), true);
$GLOBALS['_JSON'] = $jsonData;

//user.php
if (isset($_JSON['userLogin'])) {
    /* ... */
}

In this way, you can define $_GLOBALS on your requested page and use it like $_POST on any page you want. That's all I'm going to tell you in detail about "Getting JSON requests with PHP". Thanks.

Yazıyı Oku...

PHP ile JSON olarak $_REQUEST(POST ve GET gibi) alma işlemi

PHP ile JSON olarak $_REQUEST(POST ve GET gibi) alma işlemi

  Mayıs 23, 2021    Gökhan Krl

---

JSON veri almanın en pratik ve hızlı yoludur. PHP, JSON nesnesi için encode ve decode özelliği sunar. Ancak veriyi application-json olarak doğrudan alma işlemi yapamazsınız. 

Bu yüzden $_GET ve $_POST üzerinden JSON standardı ile bir veri alımı yapamazsınız. Veriyi almak için PHP'nin I/O için sağlamış olduğu girişi kullanacağız.

file_get_contents('php://input')

Şimdi bunu biraz daha genişletelim ve gelen verinin JSON olduğunu varsayalım.

json_decode(file_get_contents('php://input'), true);

Yukarıdaki işlem bize JSON verisi geldiğinde veriyi alıp PHP Array'a çevirecek ve eğer gelen veri JSON olarak gelmezse de null olarak dönecek. Böylece bu işlemi artık bir Router üzerinde deneyebiliriz.

function getJSON()
{
    $jsonData = json_decode(file_get_contents('php://input'), true);
    return $jsonData ?? [];
}

Şimdi $_POST ve $_GET üzerinden veriyi aldığımız gibi getJSON() üzerinden de alma işlemini JSON olarak gerçekleştirebilirsiniz.

Eğer isterseniz veriyi $_POST veya $_GET üzerinden aldığımız gibi global olarak tanımlayıp kullanabiliriz de. Bunun için:

// index.php
$jsonData = json_decode(file_get_contents('php://input'), true);
$GLOBALS['_JSON'] = $jsonData;

//user.php
if (isset($_JSON['kullaniciGirisi'])) {
    /* ... */
}

Bu şekilde istek atılan sayfanızda $_GLOBALS tanımlayarak istediğiniz herhangi bir sayfada $_POST gibi de kullanabilirsiniz. "PHP ile JSON istek alma işlemi" ile ilgili detaylı anlatacaklarım bu kadardı. Teşekkürler.

Yazıyı Oku...

Javascript "Computed Propery Name"

Javascript "Computed Propery Name"

  Mayıs 04, 2021    Gökhan Krl

---

Computed Property Name

ES6’nın "Computed Propery Name" özelliği, bir nesnede bir özellik adı olarak hesaplanacak bir ifadeye (bir değişken veya işlev çağrısı gibi tek bir değerle sonuçlanan bir kod parçası) sahip olmanızı sağlar.

Örnek Kodlama

Örneğin, iki bağımsız değişken (anahtar, değer) alan ve bu bağımsız değişkenleri kullanarak nesne döndüren bir fonksiyon oluşturmak istediğinizi varsayalım. Nesnedeki özellik adı bir değişken (anahtar) olduğundan, önce nesneyi oluşturmanız, ardından bu özelliği değere atamak için köşeli ayraç gösterimi kullanmanız gerekirdi.

function nesneYap (key, value) {
  let obj = {}
  obj[key] = value
  return obj
}

nesneYap('name', 'Kaan') // { name: 'Kaan' }

Ama artık Computed Propery Name ile bir nesneyi önce oluşturmak zorunda kalmadan, doğrudan nesne üzerinde bir özellik olarak atamak için nesne değişmez gösterimini kullanabilirsiniz. Yani yukarıdaki kod artık bu şekilde yeniden yazılabilir.

function nesneYap (key, value) {
  return {
    [key]: value
  }
}

nesneYap('name', 'Kaan') // { name: 'Kaan' }

Anahtar, köşeli parantez [ ] içine alındığı sürece herhangi bir şey olabilir.

Yazıyı Oku...

Vuex Store - Mutations'da Sabitler ve Senkronize

Vuex Store - Mutations'da Sabitler ve Senkronize

  Nisan 25, 2021    Gökhan Krl

---

Mutasyonlar İçin Sabitleri Kullanmak

Çeşitli Flux uygulamalarında mutasyon türleri için sabitlerin kullanılması yaygın olarak görülen bir durumdur. Bu, kodun linter gibi araçlardan yararlanmasını sağlar ve tüm sabitleri tek bir dosyaya koymak, beraber çalıştığınız geliştiricilerin tüm uygulamada hangi mutasyonların mümkün olduğunu bir bakışta görmelerini sağlar:

// mutasyon-listesi.js
export const MUTASYONLAR = 'MUTASYONLAR'

// store.js
import Vuex from 'vuex'
import { BIR_MUTASYON } from './mutasyon-listesi'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // Sabit'i "ES2015 Computed Property Name" özelliği ile
    // bir fonksiyon adı olarak kullanabilirsiniz
    [BIR_MUTASYON] (state) {
      // bir mutasyon gerçekleştir
    }
  }
})

Sabitlerin kullanılıp kullanılmaması büyük ölçüde bir tercihtir ve birçok geliştiricinin olduğu büyük projelerde yardımcı olabilir, ancak beğenmezseniz tamamen isteğe bağlıdır.

Mutasyonlar Senkron Olarak Çalışmalıdır

Hatırlanması gereken önemli bir kural, mutasyonların eşzamanlı olması gerektiğidir. Neden mi ? Aşağıdaki örneği düşünün:

mutations: {
  birMutasyon (state) {
    api.callAsyncMethod(() => {
      state.miktar++
    })
  }
}

Şimdi uygulamada hata ayıkladığımızı ve devtool üzerinden Vue'nun Mutations loglarına baktığımızı düşünün. Kaydedilen her mutasyon için, devtool, "önce" ve "sonra" olarak durumları anlık görüntü biçiminde yakalama ihtiyacı duyacak. Bu yüzden, yukarıdaki örnekte olduğu gibi mutasyonun içindeki eşzamansız bir geri çağırma fonksiyonu bunu imkansız kılar. Mutasyon işlendiğinde callback o anda anlık olarak çağrılmayacağı için devtool'un callback'in ne zaman çağrılacağını bilmesinin bir yolu yoktur. Dolayısıyla callback ile gerçekleştirilen herhangi bir mutasyon işlemi takip edilemez!

Mutasyonlar ile ilgili anlatım bilgileri bu kadardı. Bundan sonraki süreçte Actions'lara değineceğiz. Teşekkürler.

Yazıyı Oku...

Bootstrap - 12 yerine 24'lü Izgara Yapısı

Bootstrap - 12 yerine 24'lü Izgara Yapısı

  Nisan 19, 2021    Gökhan Krl

---

Son yaptığım projemi Figma'da tasarımladıktan sonra HTML üzerine dökerken çok enteresan bir durumla karşılaştım. Yatay eksende 3 bölüme ayırdığım bir Section içerisinde sol ve sağ bloklar içerisinde tasarımlamış olduğum kartlarım ile orta bölüme de dikey olarak attığım ufak bir çizgi Bootstrap'ın grid yapısına uymadı. 

İçeriği orantılı bir şekilde ortalamam için sağa ve sola .col-5, .col-5 i ve orta bölüme de kalan .col-2 yi vermem gerekiyordu. Yani örnekteki gibi:

 

Tahmin edebileceğiniz üzere bir tane çizgi için orta bölüm aşırı geniş durdu ve tasarımın görünümünde biçimsizliğe neden oldu:

Dolayısıyla CSS üzerinden bir çözüm arayışına giriştim.

Çözümüm

Çok ta uğraştırıcı bir çözümü yoktu tabi. Sağ ve sol karta width:108%; verdim ve sağ tarafa da margin-left:-8%; verip mobilde de bunu sıfırlayınca sütunlar üzerinde herhangi bir değişiklik yapmadan meseleyi çözmüş oldum. Ancak tasarım düzeninde biraz oynama yapmak durumunda kaldım.

Sonuç

Peki bu ızgara sisteminin hep klasik web sayfaları ortaya koymak olduğunu gören bir tek ben miyim ? Hayır. Bu sistemin tasarımı sabit bir ızgara sistemine bağımlı kıldığını söyleyen çok insan var. Ancak nasılsa bu durum halen Bootstrap 5 üzerinde de devam etmekte. Aslında benim rahatsız olduğum tek mesele bu da değil. Bootstrap Container boyutu genişliği de var. Nedendir bilmem ama bir ekran neden 1140px içerisinde sabitlenmek zorunda ? 

Farklı düşünenler var mıdır bilemem ama, Bootstrap Container içerisine bulunan bir web sitesini en az 22" bir LCD üzerine çektiğim zaman kısa tabiriyle cücük gibi duruyor. En azından son zamanların Flex Layout düzeni ile kodlanan Bulma CSS bu konuda biraz daha elini genişletmiş ve Container boyutunu 1152px'e çekmiş. Deneme yaptığımda tabiki de Bootstrap'a göre daha ferah bir görünüm sağlıyor. 12px ne kadar etkili olabilir düşüncesinde olabilirsiniz ama evet gerçekten görünüme çok etki ediyor kesinlikle deneyin. Ayrıca 1488px ve üzeri için de 1344px lik bir Container genişliği belirlemiş.

Bulma İçin: https://bulma.io/

Yazımın sonuna geldiğimde ızgara konusuda artık bireysel bir çözüm üretme araşıyışına giriştim ve kendim için 24'lük ızgara mantığı ile yeni bir yapı ürettim. Üstelik bunu varsayılan Bootstrap class'larının üzerine bastırarak uyguladım. Şu anki aşamada ilk olarak kendi blog sayfamda kullanıyorum ancak ufak denemelerim sonucunda biraz daha bunu genişleterek 32 veya 54'e çıkarabilirim diye düşünüyorum. Ayrıca blog sayfamın Content alanının genişliğini de bir nebze olsun genişleterek şimdiden kendi ızgaram ile kendi görünümümü özelleştirebildim. 

24'lük Izgara CSS Kodu

Uygulamış olduğum 24 lük grid CSS'ini minify olarak alabilirsiniz. İlerde daha detaylı olarak Github üzerinden yayınlamayı düşünüyorum.

*{box-sizing:border-box}body{margin:0}[class^=col]{flex-shrink:0;padding-left:17px;padding-right:17px}.col-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-6{flex-basis:25%;max-width:25%}.col-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-12{flex-basis:50%;max-width:50%}.col-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-18{flex-basis:75%;max-width:75%}.col-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-24{flex-basis:100%;max-width:100%}.container{margin-left:auto;margin-right:auto}.row{display:flex;flex-wrap:wrap}@media screen and (min-width:768px){.container{max-width:720px}.col-sm-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-sm-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-sm-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-sm-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-sm-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-sm-6{flex-basis:25%;max-width:25%}.col-sm-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-sm-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-sm-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-sm-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-sm-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-sm-12{flex-basis:50%;max-width:50%}.col-sm-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-sm-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-sm-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-sm-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-sm-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-sm-18{flex-basis:75%;max-width:75%}.col-sm-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-sm-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-sm-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-sm-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-sm-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-sm-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1024px){.container{max-width:960px}.col-md-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-md-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-md-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-md-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-md-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-md-6{flex-basis:25%;max-width:25%}.col-md-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-md-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-md-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-md-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-md-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-md-12{flex-basis:50%;max-width:50%}.col-md-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-md-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-md-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-md-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-md-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-md-18{flex-basis:75%;max-width:75%}.col-md-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-md-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-md-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-md-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-md-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-md-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1216px){.container{max-width:1152px}.col-lg-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-lg-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-lg-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-lg-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-lg-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-lg-6{flex-basis:25%;max-width:25%}.col-lg-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-lg-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-lg-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-lg-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-lg-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-lg-12{flex-basis:50%;max-width:50%}.col-lg-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-lg-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-lg-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-lg-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-lg-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-lg-18{flex-basis:75%;max-width:75%}.col-lg-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-lg-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-lg-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-lg-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-lg-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-lg-24{flex-basis:100%;max-width:100%}}@media screen and (min-width:1408px){.container{max-width:1344px}.col-xl-1{flex-basis:4.166666667%;max-width:4.166666667%}.col-xl-2{flex-basis:8.333333334%;max-width:8.333333334%}.col-xl-3{flex-basis:12.500000001%;max-width:12.500000001%}.col-xl-4{flex-basis:16.666666668%;max-width:16.666666668%}.col-xl-5{flex-basis:20.833333335%;max-width:20.833333335%}.col-xl-6{flex-basis:25%;max-width:25%}.col-xl-7{flex-basis:29.166666667%;max-width:29.166666667%}.col-xl-8{flex-basis:33.333333334%;max-width:33.333333334%}.col-xl-9{flex-basis:37.500000001%;max-width:37.500000001%}.col-xl-10{flex-basis:41.666666668%;max-width:41.666666668%}.col-xl-11{flex-basis:45.833333335%;max-width:45.833333335%}.col-xl-12{flex-basis:50%;max-width:50%}.col-xl-13{flex-basis:54.166666667%;max-width:54.166666667%}.col-xl-14{flex-basis:58.333333334%;max-width:58.333333334%}.col-xl-15{flex-basis:62.500000001%;max-width:62.500000001%}.col-xl-16{flex-basis:66.666666668%;max-width:66.666666668%}.col-xl-17{flex-basis:70.833333335%;max-width:70.833333335%}.col-xl-18{flex-basis:75%;max-width:75%}.col-xl-19{flex-basis:79.166666667%;max-width:79.166666667%}.col-xl-20{flex-basis:83.333333334%;max-width:83.333333334%}.col-xl-21{flex-basis:87.500000001%;max-width:87.500000001%}.col-xl-22{flex-basis:91.666666668%;max-width:91.666666668%}.col-xl-23{flex-basis:95.833333335%;max-width:95.833333335%}.col-xl-24{flex-basis:100%;max-width:100%}}

İlerleyen zamanlarda nasıl düşünürüm bilmiyorum ancak muhtemelen bu gidişle bu yapının çok daha dışına çıkabilirim diye düşünüyorum. Zaman ayırdığınız için teşekkürler.

Yazıyı Oku...

Vuex Store - Mutations ve Vue.js Reaktivitesi

Vuex Store - Mutations ve Vue.js Reaktivitesi

  Nisan 19, 2021    Gökhan Krl

---

Mutasyonların Vue'nun Reaktivite Kurallarına Uyması

Bir Vuex mağazasının state'i Vue tarafından reaktif hale getirildiğinden, state üzerinde değişiklik yaptığınızda durumu gözlemleyen Vue bileşenleri otomatik olarak güncellenecektir. Bu aynı zamanda Vuex mutasyonlarının düz Vue ile çalışırken aynı reaktivite uyarılarına tabi olduğu anlamına gelir. 

Yani CLI üzerinden değil de, web üzerinde kullanmış olduğunuz Vue örneği ile Store üzerinde commit işlemi yapacağınız zaman karşınıza Vue'nun reaktivitesi sorunu çıkacaktır. Değişim yaptığınız veri ile değişen verileriniz birbirleri ile reaktif bir şekilde çalışacağından iki veri arasında bir bağ kurulmuş olacak ve siz store üzerinde değişiklik yapmadığınız halde değişim yapmış olduğunuz veri üzerinde değişiklik yaptığınızda Store üzerindeki veri de bundan etkilenecektir. Aşağıdaki örnekleri inceleyelim.

state: {
    user: {
      id: 1
    }
},

Yukarıdaki user'a bir mutation uygulayalım.

mutations: {
    setUserName (state, userData) {
        // userData = {
        //     id: 2,
        //     name: Ali
        //}
        state.user = userData;
}

Yukarıda gördüğünüz gibi "userData"yı direk "user"a mutate ettik. Şimdi "userData" yı bir Vue bileşeni içerisinde "userData.name = Veli" yaparsak, Store üzerindeki "user.name" de değişmiş olacak. Bu yüzden aşağıdaki yöntemler ile bu sorunu aşmanız gerekir.

state: {
    user: {
      id: 1
    }
  },
  getters: {
    getUserId: state => state.user.id,
    getUserName: state => state.user.name
  },
  mutations: {
    setUserName (state, name) {
      // İlk çözüm:
      // user üzerinde değeri önceden belirtin örn: user.name = null ve şöyle görünmeli
      // user: {
      //     id: 2,
      //     name: null
      // }
      // Böylelikle "name" daha önceden belirtildiği için Vue içerisindeki değişiklik
      // burayı tetiklemeyecek
      state.user.name = name

      // İkinci çözüm:
      // Object assign methodu ile her iki verinin de referansını sıfırlayın
      // Object.assign({}, state.user, { name })
      state.user = { ...state.user, name }

      // Üçüncü çözüm:
      // Vue'nun kendi içerisindeki Vue.set() fonksiyonunu kullanın.
      // Aynı sonucu verecektir.
      Vue.set(state.user, 'name', name)
}

Vue'nun reaktivitesinin Mutations üzerindeki etkisini ve bunun bir sorunken üç farklı yol ile çözümüne değindik. Tekrar hatırlatmakta fayda var bu sorun tam olarak düz Vue kullanırken karşılaşabileceğiniz bir durum. CLI üzerinde böyle bir sorun yaşamayacaksınız. Bir sonraki yazımda Mutatitonsların sabitler ile kullanımına değineceğiz. Teşekkürler.

Yazıyı Oku...

Vuex Store - Mutations Kavramı ve Anlatımı

Vuex Store - Mutations Kavramı ve Anlatımı

  Nisan 19, 2021    Gökhan Krl

---

Bir Vuex mağazasında State üzerindeki veriyi değiştirmenin tek yolu bir mutasyon gerçekleştirmektir. Mutasyon içerisinde bir fonksiyon oluşturduğumuzda State'i ilk argüman olarak alır:

const store = new Vuex.Store({
  state: {
    miktar: 1
  },
  mutations: {
    artir (state) {
      // State üzerindeki "miktar"ı güncelle
      state.miktar++
    }
  }
})

Bir mutasyonu doğrudan nesne adı ile çağıramazsınız. Bunun için store.commit("") fonksiyonunu çağırmanız gerekir.

store.commit('miktar')

Veriyi Commit Etmek

Store.commit'e payload(güncelleyeceğiniz veri) olarak adlandırılan ek bir bağımsız değişken iletebilirsiniz:

mutations: {
  increment (state, payload) {
    state.miktar += payload.sayi
  }
}

Payload güncel olarak değişim yapacağınız data'dır.

store.commit('artir', {
  sayi: 10
})

Nesne Tarzında Commit Yapmak

Bir mutasyonu gerçekleştirmenin alternatif bir yolu, type özelliği olan bir nesneyi doğrudan kullanmaktır:

store.commit({
  type: 'artir',
  sayi: 10
})

Yukarıda commit() içerisine sadece bir nesne ekledik ve daha önce birinci parametrede belirttiğimiz mutasyon adını bu sefer type değeri ile ekledik. Vuex de adı type üzerinden aldı. Bu durum mutasyonun daha önceki yapısı üzerinde de bir değişiklik yapmanızı gerektirmez. Yani aynı işlemi yapmış olduk.

Mutasyonların nasıl işlediğine ve kullanıldığına değindik. Mutasyon kullanımını üç farklı makalede ele alacağız. Bir sonrakinde Vue'nun reaktivite sisteminin Mutasyonlar üzerindeki etkisini inceleyeceğiz.

Yazıyı Oku...