🧠 Pengenalan Vuex

Vuex adalah library manajemen state resmi untuk aplikasi Vue.js. Vuex membantu kamu menyimpan dan mengelola state global yang dapat digunakan oleh berbagai komponen dalam aplikasi, tanpa harus saling mengoper data secara langsung (prop drilling).

Vuex direkomendasikan untuk proyek Vue 2. Untuk Vue 3, gunakan Pinia sebagai alternatif modern.

---

🔄 Mengapa Perlu Vuex?

Tanpa Vuex:

• Data antar komponen harus dipass lewat prop
• Sulit mengelola state aplikasi besar (misalnya data user, keranjang belanja, dll)

Dengan Vuex:

• State tersentralisasi
• Komponen bisa membaca dan memperbarui state tanpa saling terikat
• Debugging lebih mudah

---

📦 1. Instalasi Vuex

npm install vuex --save

---

⚙️ 2. Struktur Dasar Vuex Store

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

---

📲 3. Menggunakan Store di Vue

a. Daftarkan store di main.js

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

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

b. Akses State di Komponen

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
}
</script>

c. Memanggil Mutations

<button @click="$store.commit('increment')">Tambah</button>

d. Memanggil Actions

<button @click="$store.dispatch('increment')">Tambah</button>

e. Menggunakan Getter

<template>
  <p>Double: {{ doubleCount }}</p>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
}
</script>

---

📁 4. Struktur Modular (Opsional)

Vuex mendukung pemisahan store ke dalam module, yang dibahas pada bagian vuex-modules.

📌 Istilah Penting

Bagian	Fungsi
state	Data pusat aplikasi
mutations	Mengubah state secara sinkron
actions	Logika async (misal: fetch API), lalu memanggil mutations
getters	Nilai turunan dari state (mirip computed)