⚙️ Cara Mengelola State & Side Effects di Vue JS Menggunakan Vuex atau Pinia

 

Dalam dunia frontend development modern, aplikasi semakin kompleks.
Komponen saling berinteraksi, data harus konsisten di berbagai bagian UI, dan setiap aksi pengguna bisa memicu efek berantai seperti fetch API, update store, hingga notifikasi real-time.

Nah, di sinilah konsep state management dan side effects di Vue.js menjadi sangat penting.
Dua alat utama yang sering digunakan oleh developer Vue adalah Vuex dan Pinia.

---

🔍 Apa Itu State Management di Vue.js?

State adalah data utama yang digunakan oleh komponen-komponen dalam aplikasi Vue.
Contohnya:

• Status login user

• Keranjang belanja (shopping cart)

• Tema (dark/light mode)

• Daftar produk dari API

Saat aplikasi tumbuh besar, mengelola state antar komponen menjadi rumit.
Solusinya? Gunakan state management library seperti Vuex atau Pinia agar data tetap terpusat, reaktif, dan mudah di-debug.

---

⚡ Vuex: Sistem State Management Klasik di Vue

Vuex adalah library resmi yang dikembangkan tim Vue.js untuk mengelola state global.
Ia bekerja dengan konsep store tunggal, di mana seluruh data aplikasi disimpan di satu tempat terpusat.

Struktur dasarnya:

• State → data utama

• Getters → untuk mengambil data

• Mutations → untuk mengubah data secara sinkron

• Actions → untuk efek samping (side effects), misalnya request ke API

Contoh sederhana Vuex:

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  },
  getters: {
    getCount: (state) => state.count
  }
})

Lalu di komponen:

<template>
  <button @click="increment">Klik: {{ count }}</button>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()
const count = computed(() => store.getters.getCount)
const increment = () => store.commit('increment')
</script>

🧩 Kelebihan Vuex:

• Cocok untuk proyek besar dan kompleks

• Struktur jelas dan disiplin (mutations, actions, dll)

• Debugging mudah dengan DevTools

⚠️ Kekurangan Vuex:

• Verbose (banyak boilerplate)

• Sintaks agak kaku untuk proyek kecil

• Sulit dikelola saat aplikasi berskala menengah

---

🌱 Pinia: Generasi Baru State Management untuk Vue 3

Pinia adalah penerus modern dari Vuex.
Ia dibuat dengan filosofi lebih ringan, lebih sederhana, dan 100% kompatibel dengan Vue 3 dan Composition API.

Pinia menggunakan pendekatan seperti React’s Zustand atau Redux Toolkit — lebih fleksibel dan ringkas.

Contoh Pinia:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    asyncIncrement() {
      setTimeout(() => this.increment(), 1000)
    }
  },
  getters: {
    double: (state) => state.count * 2
  }
})

Lalu di komponen:

<template>
  <button @click="increment">Count: {{ count }} | Double: {{ double }}</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
const { count, double } = store
const increment = store.increment
</script>

✨ Kelebihan Pinia:

• Sintaks lebih ringkas dan intuitif

• Support penuh Composition API

• TypeScript-friendly

• Bisa digunakan di SSR (Nuxt 3)

• Mudah untuk testing dan debugging

---

🔄 Perbedaan Utama Vuex vs Pinia

Fitur	Vuex	Pinia
Kompatibilitas	Vue 2 & 3	Vue 3 (dan Nuxt 3)
Sintaks	Verbose & modular	Ringkas & Composition-friendly
State	Satu store global	Banyak store modular
DevTools	Ya	Ya (lebih cepat & modern)
TypeScript	Kurang fleksibel	Sangat mendukung
Boilerplate	Banyak	Sedikit

➡️ Kesimpulan cepat:
Untuk proyek baru Vue 3, gunakan Pinia.
Untuk proyek lama Vue 2, Vuex masih relevan.

---

⚙️ Mengelola Side Effects (Efek Samping) di Vuex & Pinia

Side effects adalah efek tambahan dari aksi tertentu — seperti:

• Fetch API dari server

• Menyimpan data ke localStorage

• Mengubah URL atau navigasi

🔹 Mengelola Side Effects di Vuex

Biasanya dilakukan di actions:

actions: {
  async fetchUser({ commit }) {
    const response = await fetch('/api/user')
    const data = await response.json()
    commit('setUser', data)
  }
}

🔹 Mengelola Side Effects di Pinia

Lebih sederhana, karena bisa langsung pakai async/await:

actions: {
  async fetchUser() {
    const res = await fetch('/api/user')
    this.user = await res.json()
  }
}

Pinia lebih fleksibel karena mendukung penggunaan watchEffect, composable, dan async function langsung di dalam store.

---

🧠 Tips Profesional Mengelola State di Vue.js

1. Gunakan store hanya untuk data global
   Jangan masukkan semua state ke store. Simpan hanya yang digunakan lintas komponen.

2. Pisahkan store berdasarkan domain fitur
   Misal: userStore, productStore, cartStore.

3. Gunakan getters untuk computed value
   Hindari perhitungan berat di template.

4. Gunakan plugin persist
   Simpan state ke localStorage atau IndexedDB agar tidak hilang setelah reload:

   npm install pinia-plugin-persistedstate
   

   Di store:

   import { defineStore } from 'pinia'
   import persist from 'pinia-plugin-persistedstate'
   
   export const useUserStore = defineStore('user', {
     state: () => ({ name: 'Den', loggedIn: false }),
     persist: true
   })
   

5. Gunakan DevTools untuk debugging
   Baik Vuex maupun Pinia punya extension resmi di browser untuk tracking state perubahan secara real-time.

---

📈 Tren State Management di 2025

1. Pinia menjadi standar baru Vue 3+
   Hampir semua project modern kini beralih ke Pinia.

2. Integrasi dengan Composition API makin kuat
   Banyak developer kini membuat composable store tanpa boilerplate.

3. Reactive Backend (GraphQL + Pinia)
   Mengelola data real-time langsung dari GraphQL subscription jadi lebih mudah.

4. Server State Management
   Framework seperti Nuxt 3 mulai menggabungkan konsep client dan server state agar performa makin optimal.

---

🧩 Kesimpulan

Mengelola state dan side effects dengan benar adalah fondasi penting untuk membangun aplikasi Vue yang stabil, cepat, dan mudah di-maintain.

• Gunakan Vuex untuk proyek besar di Vue 2.

• Gunakan Pinia untuk proyek baru berbasis Vue 3.

• Atur side effects di dalam actions dengan async/await agar logic tetap bersih.

• Pastikan hanya menyimpan data penting di store agar performa tidak terganggu.

🔑 Intinya:

“Pinia adalah masa depan state management di Vue — cepat, ringan, dan modern.”