State Management with Vuex in Vue.js Applications

What Will You Learn in This Guide?

Data management in large Vue.js projects becomes complex over time.
In this guide, you will centrally manage application status using Vuex.
You will learn State, Action, Mutation and Module structure with a real scenario.

What is Vuex and Why is it Used?

Vuex is the official state management library for Vue.js.
All application data is kept in one central location.
The data flow is one-way and easily tracked.

Vuex solves these problems:

• Complex data transfer between components
• Uncontrolled state changes
• Application architecture that does not scale

---

Prerequisites

• Node.js v14.16.0 or above
• A Vue 3 project built with Vue CLI
• Basic knowledge of JavaScript, HTML and CSS

---

Step 1: Data and Component Preparation

Let's create the sample data file first.

mkdir src/data
touch src/data/sunucular.js

• This file contains sample server data to be used in the application.

---

export default [
  { isim: 'İstanbul Veri Merkezi', kod: 'TR-IST', lokasyon: 'Türkiye' },
  { isim: 'Amsterdam Veri Merkezi', kod: 'EU-AMS', lokasyon: 'Hollanda' },
  { isim: 'Frankfurt Veri Merkezi', kod: 'EU-FRA', lokasyon: 'Almanya' }
]

• Now let's create the card component that will display this data.

---

<template>
  <div class="sunucu-karti">
    <h3>{{ sunucu.kod }}</h3>
    <p>{{ sunucu.isim }}</p>
    <small>{{ sunucu.lokasyon }}</small>
  </div>
</template>

<script>
export default {
  props: {
    sunucu: { type: Object, required: true }
  }
}
</script>

• This component displays a single server information as a card.

---

Step 2: Vuex Installation and Store Creation

1. Let's add Vuex to the project.

npm install vuex@next --save

2. Let's create the Store file.

import { createStore } from 'vuex'

export default createStore({
  state: {
    ad: 'GenixNode',
    soyad: 'Geliştiricisi',
    favoriler: []
  },
  mutations: {},
  actions: {},
  getters: {}
})

• This structure creates the unique data source of the application.

---

3. Let's introduce the Store to the application.

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

createApp(App).use(store).mount('#app')

• This makes Vuex accessible to the entire application.

---

Step 3: Actions, Mutations and Getters

1. State is not changed directly.

2. Action → Mutation → State flow is followed.

export default createStore({
  state: {
    ad: 'GenixNode',
    soyad: 'Geliştiricisi',
    favoriler: []
  },
  getters: {
    tamIsim(state) {
      return `${state.ad} ${state.soyad}`
    }
  },
  mutations: {
    FAVORI_GUNCELLE(state, payload) {
      state.favoriler = payload
    }
  },
  actions: {
    favorilereEkle({ commit, state }, sunucu) {
      const yeniListe = [...state.favoriler, sunucu]
      commit('FAVORI_GUNCELLE', yeniListe)
    }
  }
})

• Getter processes the data

• Action executes business logic

• Updates mutation state

---

Step 4: Scalable Architecture with Vuex Modules

1. Modules should be used as the store grows.

export default {
  namespaced: true,
  state: {
    ad: 'GenixNode',
    soyad: 'Admin'
  },
  getters: {
    tamIsim: state => `${state.ad} ${state.soyad}`
  }
}

• This structure divides the store into parts and makes management easier.

---

Frequently Asked Questions (FAQ)

1. What is the difference between Action and Mutation? Mutation works synchronously and updates the state. Action can be asynchronous and calls mutation.

2. Why isn't State changed directly? For traceability and debugging.

3. Should Vuex or Pinia be preferred? Pinia is recommended for new projects. Vuex is still common in enterprise projects.

4. Is it mandatory to use modules? Not in small projects. Definitely yes for large projects.

---

Result

With this guide, you learned the basic and advanced structures of Vuex. Your application is now more scalable and controlled. You can grow your Vue.js projects safely.

You can examine GenixNode solutions to run the applications you develop on high-performance infrastructures.