Pernah nggak, kamu punya data di satu komponen, tapi butuh data itu di komponen lain yang jauh banget posisinya? Kamu pun mulai melempar props dari komponen parent ke child, lalu ke child lagi, dan terus… sampai kamu sendiri pusing ngikutinnya. Itulah yang disebut props drilling — dan inilah alasan kenapa state management vue 3 lahir. Solusinya? Kenalan sama Pinia vue 3, si "gudang data global" yang bakal bikin hidupmu jauh lebih tenang. Artikel ini adalah bagian dari seri 16 artikel Belajar Vue: Vue from Zero to Zorro.
Pinia adalah library state management resmi untuk Vue 3. Ia menyediakan sebuah store — tempat penyimpanan data global — yang bisa diakses oleh komponen mana pun tanpa perlu melempar props bolak-balik. Pinia menggantikan Vuex dengan sintaks yang lebih bersih, intuitif, dan mendukung TypeScript secara penuh.
🏪 Apa Itu Pinia dan Kenapa Kamu Butuh State Management Vue 3?
Bayangkan kamu punya toko swalayan besar. Setiap kasir di toko itu (anggap saja sebagai "komponen") perlu tahu berapa stok barang yang tersisa. Kalau setiap kasir punya catatan stok sendiri-sendiri, pasti kacau. Data beda-beda, ada yang update ada yang enggak. Solusinya? Satu gudang pusat yang semua kasir bisa akses dan update secara real-time.
Itulah fungsi Pinia vue 3. Ia adalah "gudang pusat" untuk data kamu. Simpan data di Pinia, dan komponen mana pun bisa membaca atau mengubahnya — tanpa perlu repot props drilling.
Pinia kini menjadi state management resmi yang direkomendasikan tim Vue.js — menggantikan posisi Vuex. Namanya terinspirasi dari kata "piña" dalam bahasa Spanyol yang artinya nanas 🍍. Logo nanosnya lucu, tapi fungsinya serius!
⚖️ Pinia vs Vuex: Apa Bedanya?
| Fitur | 🍍 Pinia | 📦 Vuex |
|---|---|---|
| Sintaks | ✅ Simpel & Modern | ❌ Verbose & Kompleks |
| TypeScript Support | ✅ Native & Penuh | ⚠️ Perlu Konfigurasi |
| Mutations | ✅ Tidak Diperlukan | ❌ Wajib Ada |
| Devtools Support | ✅ Sangat Baik | ✅ Baik |
| Status Resmi | ✅ Rekomendasi Vue 3 | 🔁 Legacy (Vue 2/3) |
🚀 Cara Install dan Setup Pinia Vue 3
Oke, sekarang masuk ke bagian praktisnya. Ikuti langkah-langkah berikut untuk mulai menggunakan state management vue 3 dengan Pinia di project kamu:
Install Pinia via npm
Jalankan perintah ini di terminal project Vue 3 kamu:
npm install pinia
Daftarkan Pinia di main.js
Buka file main.js dan tambahkan Pinia sebagai plugin:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
Buat Store Pertamamu
Buat folder stores/ di dalam src/, lalu buat file useCounterStore.js:
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
// STATE — data global kamu
const count = ref(0)
const nama = ref('Belajar Pinia')
// GETTER — data turunan/kalkulasi
const doubleCount = computed(() => count.value * 2)
// ACTION — fungsi untuk ubah data
function increment() {
count.value++
}
function reset() {
count.value = 0
}
return { count, nama, doubleCount, increment, reset }
})
Gunakan Setup Store (seperti contoh di atas) jika kamu sudah terbiasa dengan Composition API. Sintaksnya identik dengan setup() di komponen Vue biasa — jadi kurva belajarnya lebih landai!
🔌 Cara Pakai Store Pinia di Komponen Vue 3
Nah, ini bagian paling seru. Setelah store dibuat, kamu bisa memanggilnya di komponen mana pun — komponen yang posisinya jauh sekalipun dari komponen lain. Tidak perlu props, tidak perlu emit. Langsung saja!
Pakai Store di Komponen
Import store dan langsung gunakan state, getter, dan action-nya:
<template>
<div>
<h2>{{ store.nama }}</h2>
<p>Count: {{ store.count }}</p>
<p>Double: {{ store.doubleCount }}</p>
<button @click="store.increment()">Tambah</button>
<button @click="store.reset()">Reset</button>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/useCounterStore'
const store = useCounterStore()
</script>
Jika kamu perlu mengubah state langsung menggunakan destructuring, gunakan storeToRefs() agar reaktivitas tetap terjaga. Tanpa itu, data bisa jadi tidak reaktif dan komponen tidak akan auto-update!
Gunakan storeToRefs() untuk Destructuring
Cara yang lebih bersih jika kamu ingin menggunakan state langsung tanpa prefix store.:
import { useCounterStore } from '@/stores/useCounterStore'
const store = useCounterStore()
// ✅ state & getter: pakai storeToRefs
const { count, nama, doubleCount } = storeToRefs(store)
// ✅ action: langsung destructure biasa
const { increment, reset } = store
💡 Contoh Nyata: Store Keranjang Belanja
Supaya makin kebayang, yuk buat contoh store yang lebih realistis: keranjang belanja sederhana. Data keranjang ini bisa diakses dari komponen produk, header, dan halaman checkout sekaligus — tanpa perlu props drilling sama sekali!
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCartStore = defineStore('cart', () => {
const items = ref([])
// Hitung total item di keranjang
const totalItems = computed(() => items.value.length)
// Hitung total harga
const totalHarga = computed(() =>
items.value.reduce((sum, item) => sum + item.harga, 0)
)
function tambahItem(produk) {
items.value.push(produk)
}
function hapusItem(id) {
items.value = items.value.filter(item => item.id !== id)
}
return { items, totalItems, totalHarga, tambahItem, hapusItem }
})
Data di Pinia tidak persisten secara default — artinya kalau halaman di-refresh, data akan hilang. Untuk menyimpan data permanen (misalnya isi keranjang), kamu perlu plugin tambahan seperti pinia-plugin-persistedstate atau simpan manual ke localStorage.
Buat satu store per "fitur", bukan satu store raksasa untuk semua data. Contoh: useAuthStore, useCartStore, useUserStore. Kode jadi lebih mudah dikelola dan di-debug!
ref() atau reactive()computed()Belajar Vue: Vue from Zero to Zorro
16 artikel lengkap belajar Vue 3 dari nol hingga mahir — cocok untuk pemula yang ingin serius!
→ Lihat Daftar Isi Lengkap
No comments:
Post a Comment