Vue.JS projesine Vuex kurulumu yapmak (Vue 3, Vuex 4 & Vue 2, Vuex 3)

Merhaba, bugün son zamanlarda oldukça içli dışlı olduğum Vue (ve Vuex) alakalı yeni bir yazı hazırladım.

Vuex Nedir? Neden kullanalım?

Vuex bir Durum Yönetimi Modeli Kütüphanesi yada orjinal tabiriyle “State Management Pattern” Library. State Management Javascript kullanan çoğu frontend teknolojisi için zorunlu hale gelen bir kavram. Kısaca bahsetmek istiyorum çünkü daha sonrasında bu konu hakkında daha detaylı bir yazı yazacağım. Vuex bize bir alan ayırıyor ve burada merkezi değişkenlerimizi ekleyebiliyor, sayfamızı oradaki değişkenlerle değişikliğe uğratabiliyoruz. Bu da büyük projeler için kolaylık sağlıyor diyebilirim.

Vuex Kurulumu

Yeni bir proje oluşturarak adım adım gidelim:

ile yeni bir proje oluşturdum.

Bu aşamadan sonra projeyi ayağa kaldırıp test ediyorum.

Ve Vuex kurulumunu npm’i kullanarak yapıyorum.

Vue 3 için Vuex Kurulumu

Vue 3 şuanda oldukça yeni çoğu projenin halen Vue 2 ile çalıştığını düşünüyorum. Vue 3’te Vuex 4 sürümünü kullanmamız gerekiyor. Bunun için ayrıca versiyon belirtip o versiyonu kurmamız gerekli.

bu şekilde kurulumu yaptıktan sonra root klasöründe “store” diye bir klasör oluşturup “index.js” diye bir dosya oluşturuyorum. index.js içeriğimiz bu şekilde olmalı:

createStore adındaki fonksiyon vuex 4 ile geldi.

root klasöründeki main.js dosyasına ise vuex’i şu şekilde ekliyorum:

createApp adındaki fonksiyon vue 3 ile yeni geldi.

NOT: Vue 3 ile gelen setup metoduna göz atmanızı öneririm.

 

Şimdi sıra test etmeye geldi bunun için ana sayfama “state”de bulunan “info” değişkenini yazdıracağım.

Vue 2 için Vuex Kurulumu

Root klasöründe “store” diye bir klasör oluşturup “index.js” diye bir dosya oluşturuyorum. index.js içeriğimiz bu şekilde olmalı:

new Vuex.Store şeklinde tanımlama yaptık.

main.js dosyasına ise vuex’i şu şekilde ekliyorum:

Not: Vue 2’de template kısmını bir div içine almazsanız hata ile karşılaşabilirsiniz.

Yorum Bırak...