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:

vue create vuex-deneme

ile yeni bir proje oluşturdum.

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

cd vuex-deneme
npm run serve

Ve Vuex kurulumunu npm’i kullanarak yapıyorum.

npm install vuex --save

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.

npm i [email protected]

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ı:

import { createStore } from "vuex"

const state = {
   info:"HELLO!"
}
const mutations = {
}
const getters = {  
}
const actions = {
}

export default createStore({
   state,
   mutations,
   getters,
   actions
});

createStore adındaki fonksiyon vuex 4 ile geldi.

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

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ı:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    info:"HELLO!"
 }
 const mutations = {
 }
 const getters = {  
 }
 const actions = {
 }

 export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
  })

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

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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