Belajar Pinia - Setup, Installasi & Store Pertama

#Pendahuluan

Teori di episode 2 sudah cukup. Sekarang waktunya menulis kode nyata: mendefinisikan store pertama dan memakainya di komponen. Store counter adalah hello world-nya Pinia — kecil, jelas, dan menampilkan seluruh alur yang akan kalian pakai di setiap store berikutnya.

Episode 3 ini akan memandu kalian dari instalasi Pinia, pendaftaran ke aplikasi, pembuatan store counter, sampai mengonsumsi store di sebuah komponen SFC. Di akhir episode, kalian akan melihat angka bertambah di layar browser — bukti bahwa seluruh pipeline reactivity bekerja.

#Install dan Mount

Pastikan project Vue 3 dengan Vite sudah siap (episode 0). Install Pinia dan pasang ke aplikasi:

npm i pinia

Lalu buka src/main.ts dan daftarkan Pinia sebelum mount:

Daftarkan 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')

app.use(createPinia()) harus dipanggil sebelum app.mount('#app'). Urutan ini menjamin Pinia tersedia saat komponen pertama kali dirender.

#Store Pertama: Counter

Buat file src/stores/counter.ts. Konvensi penamaan yang disarankan: nama file sama dengan id store, dan fungsi store diawali use:

Store counter di src/stores/counter.ts

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

defineStore('counter', ...) menciptakan store dengan id counter. State count diinisialisasi nol, getter double menghitung dua kali lipat, dan action increment menaikkan nilai. Perhatikan bahwa store ini belum menyentuh komponen apa pun — dia murni unit logika.

#Memakai Store di Komponen

Di dalam komponen SFC, panggil store lewat fungsi yang diekspor. Vue akan membuat instance store pertama kali dan meng-cache-nya:

Komponen yang memakai store counter

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
 
const store = useCounterStore()
</script>
 
<template>
  <p>Nilai: {{ store.count }}</p>
  <p>Dua kali lipat: {{ store.double }}</p>
  <button @click="store.increment()">Tambah</button>
</template>

const store = useCounterStore() memberikan instance store yang reaktif. Template memakai store.count untuk membaca state dan store.increment() untuk mengubahnya. Setiap klik tombol akan menaikkan nilai, dan store.double ikut diperbarui secara otomatis.

#Membaca State dan Memanggil Action

Ada tiga cara umum berinteraksi dengan store dari komponen:

• Akses langsung: store.count — paling sederhana dan tetap reaktif.
• Panggil action: store.increment() — dipakai saat ada logika mutasi.
• Destructuring: const { count } = storeToRefs(store) — untuk mengambil field tertentu, dibahas di episode 5.

Pola akses yang benar

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
 
const store = useCounterStore()
const { count, double } = storeToRefs(store)
 
function tambahLima() {
  store.$patch({ count: store.count + 5 })
}

storeToRefs(store) mengubah state dan getters menjadi ref agar bisa di-destructure tanpa kehilangan reactivity. Untuk update tunggal sederhana, store.count = 10 langsung saja lebih mudah.

#Penutup

Di episode 3 kalian sudah menyelesaikan setup instalasi dan membuat store pertama yang benar-benar berfungsi: menginstall pinia, mendaftarkan instance ke aplikasi, mendefinisikan store counter, dan memakainya di komponen SFC.

Inti yang harus dibawa pulang:

• npm i pinia, lalu daftarkan dengan app.use(createPinia()) sebelum mount.
• Konvensi: file src/stores/<nama>.ts dan fungsi use<Nama>Store.
• Store pertama: state, getter, action dalam satu blok defineStore.
• Akses state dengan store.count, panggil action dengan store.increment().
• storeToRefs dipakai saat ingin destructuring yang tetap reaktif.
• Verifikasi di Vue DevTools: store muncul di tab Pinia.

Di episode 4 selanjutnya kita akan membahas Options Store vs Setup Store — dua gaya menulis store yang setara kemampuannya, cara menulis keduanya dengan Composition API murni, penggunaan composable di dalam store, dan panduan kapan memilih masing-masing gaya. Siapkan project kalian, karena kita akan menulis dua versi store yang sama.