Belajar Pinia - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Pinia! Series ini akan membawa kalian menguasai Pinia — library state management resmi untuk Vue — dari konsep dasar sampai production-grade. Total ada 23 episode yang tersusun dari enam fase: fundamentals, core concepts, plugins, integrasi lanjutan, scaling, sampai ekosistem modern.

Tapi sebelum mendefinisikan store pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Pinia berdiri di atas Vue 3 Composition API dan sistem reactivity-nya. Kalau kalian belum paham ref, computed, dan lifecycle hooks, konsep store akan terasa seperti kotak hitam.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan project Vue dengan Vite, menginstall Pinia, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript Modern dan TypeScript Dasar

Pinia ditulis dengan TypeScript dan memberikan type safety penuh ke store. Kalian wajib nyaman dengan sintaks ES6+: destructuring, spread operator, async/await, dan arrow function. Untuk TypeScript, cukup pahami interface dan generic — detailnya akan kita dalami di episode 16.

#Vue 3 Composition API

Ini fondasi yang tidak bisa ditawar. Pinia berjalan di atas primitif Composition API seperti ref, reactive, dan computed. Kalian juga harus paham lifecycle hooks seperti onMounted dan cara menulis Single File Component (SFC). Jika kalian masih terbiasa dengan Options API saja, jangan khawatir — episode 4 akan membandingkan keduanya secara langsung.

#Konsep Reactivity Vue

Vue 3 memakai Proxy untuk melacak akses properti (track) dan memberi tahu subscriber saat data berubah (trigger). Memahami bahwa assignment pada object reactive selalu terdeteksi akan sangat membantu saat kita membahas destructuring dengan storeToRefs di episode 5.

Untuk memastikan konsep ini tidak abstrak, perhatikan contoh kecil berikut. Kode ini menunjukkan bagaimana ref menyimpan nilai primitif yang reaktif, sementara computed menghasilkan nilai turunan yang otomatis mengikuti sumbernya:

ref, computed, dan reactive

import { ref, computed } from 'vue'
 
const count = ref(0)
const double = computed(() => count.value * 2)
 
count.value = 4
console.log(double.value) // 8

computed hanya dihitung ulang ketika dependency-nya berubah. Kalian tidak perlu memberi tahu Vue bahwa double sudah usang — sistem reactivity yang melacaknya secara otomatis. Coba tebak hasil double.value sebelum count.value = 4; jika jawaban kalian 0 dan 8 untuk dua kondisi tersebut, pemahaman dasar reactivity sudah cukup kuat untuk mengikuti series ini.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js dan Package Manager

Pinia membutuhkan Node.js versi 20 atau lebih baru. Verifikasi dulu versi Node dan package manager kalian:

node --version
npm --version

Jika kedua perintah di atas berjalan tanpa error, kalian bisa memakai npm, pnpm, atau bun. Sepanjang series ini contoh akan memakai npm agar mudah diikuti di semua sistem.

#Membuat Project Vue dengan Vite

Cara paling cepat menyiapkan project Vue 3 dengan TypeScript adalah scaffold memakai create-vue:

npm create vue@latest

npm create vue@latest akan menanyakan beberapa opsi interaktif. Pilih TypeScript untuk fitur bahasa, dan bila tersedia pilih opsi Add Pinia for state management agar Pinia langsung terpasang. Jika tidak memilihnya, install manual dengan perintah berikut:

npm i pinia

#Memverifikasi Versi Pinia

Pastikan kalian memakai versi stable terbaru, misalnya 4.0.2 per penulisan series ini:

npm view pinia version

npm view pinia version menampilkan versi terbaru di npm registry. Versi yang terinstall di project bisa kalian cek di package.json.

#Verifikasi Environment

Sebelum lanjut ke episode 1, verifikasi bahwa Pinia benar-benar siap dipakai. Buka src/main.ts dan pasang Pinia ke aplikasi:

Mount Pinia di main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
 
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

createPinia() membuat instance Pinia, dan app.use(createPinia()) mendaftarkannya ke aplikasi. Jika npm run dev berjalan tanpa error, environment kalian sudah siap.

Jika server tidak berjalan, periksa apakah Pinia benar-benar tercantum di dependencies:

"dependencies": {
  "pinia": "^4.0.2",
  "vue": "^3.5.0"
}

Versi yang diawali ^ berarti npm bebas menginstal patch terbaru dalam mayor yang sama. Jika Pinia tidak muncul di daftar ini, ulangi npm i pinia lalu jalankan ulang server development. Kesalahan paling umum di tahap ini adalah lupa menjalankan npm i setelah membuat project baru.

#Penutup

Di episode 0 kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar JavaScript, TypeScript, dan Vue 3 Composition API, menyiapkan project dengan Vite, menginstall pinia versi 4.x, serta memverifikasi bahwa instance Pinia terpasang dengan benar.

Inti yang harus dibawa pulang:

• Kuasai dulu ref, computed, dan lifecycle hooks Vue 3.
• Pahami reactivity berbasis Proxy: assignment selalu terdeteksi.
• Siapkan Node.js versi 20 atau lebih baru.
• Scaffold project dengan npm create vue@latest, lalu npm i pinia.
• Verifikasi dengan npm view pinia version dan pasang Pinia di main.ts.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Pinia — dari evolusi Vuex 3/4 ke Pinia sebagai standar resmi Vue team, masalah yang diselesaikannya, hingga perbandingan awal dengan pendekatan lain. Pastikan environment kalian sudah siap, karena perjalanan Belajar Pinia baru saja dimulai!