Vuex olmasa da olur mu?

7 Şubat’tan itibaren Vue 3, default VueJS versiyonu oldu. Yeni Vue duyurusunda Vuex’ten hiç söz edilmedi, yerine Pinia önerildi.

Vuex neden bitmeli?

Birlikte çalıştığımız bir projede İrfan Evrens’in ısrarıyla Vuex’e eleştirel bakmaya başladım. İrfan Abi, Vuex’in çalışma standartının fazla dolambaçlı olduğunu söylüyordu. Açıkçası o güne kadar hiç böyle düşünmemiştim. Vue, global state management için Vuex öneriyordu, kullanıp geçiyordum.

Mutations neden var?

En sık duyduğum Vuex eleştirisi bu. Orada bir yerlerde duran State’deki bir bilgiyi değiştirebilmek için neden Mutations var, bir bilgiyi değiştirmem gerektiğinde neden önce store.commit edip sonra değiştiriyorum. Bu bürokrasi Vuex’in henüz tamamlanmamış bir global state management tool olduğunu düşündürüyordu.

Vuex bitmeli çünkü, ReactJS, Angular, Svelte gibi framework ve library kullanan developerlar VueJS projelerini okuduklarında Vuex duvarına çarpıyorlar. Bildiğim kadarıyla VueJS dışındaki hiçbir framework veya library’de Vuex’e benzeri bir yapı yok.

İlk darbe Composition API’den

Options API’ın katı kuralları ve dağınık formatı.

Composition API sayesinde VueJS projelerinde Vuex bağımlılığı ciddi miktarda azaldı

Artık birden çok komponentte ihtiyaç duyulacak bilgiyi Composables klasörü altında oluşturduğumuz JS dosyalarında generate veya prepare ederek dilediğimiz komponente import edip kullanabiliyoruz. Bu JS dosyaları aynı anda birden çok komponentten farklı parametreler ile çağrıldığında her çağrıldığı yere oranın ihtiyaç duyduğu bilgiyi return edebiliyor.

Pinia neler vadediyor?

Pinia, Vuex’in gelecekteki hali. Daha az dolambaçlı, örneğin Global State’deki bir bilgiyi child bir komponentten değiştirmek istediğimizde. Dispatch veya Commit reserved key’lere, dolayısıyla Mutations objesine de ihtiyacımız kalmıyor.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },

  actions: {
    increment() {
      this.count++
    },
  },
})

Yukarıdaki gibi bir Store’umuz var diyelim, count bilgisini güncellemek için herhangi bir komponentte increment() fonksiyonunu call etmemiz yeterli.

store.increment()

Composition API’ı biraz daha övelim

Composables yapıyı etkin bir şekilde kullandığımız zaman Pinia’ya da ihtiyacımız kalmayacağını düşünüyorum. Belki daha sonra bu konuda bir yazı daha hazırlarım.