Belajar Pinia - DevTools & Debugging

#Pendahuluan

Debug state management tanpa DevTools seperti mencari jarum di tumpukan jerami. Untungnya, Pinia terintegrasi penuh dengan Vue DevTools — setiap store, state, getter, dan action tampil di sana, lengkap dengan fitur time-travel untuk memutar ulang perubahan.

Episode 10 membahas dua hal: memanfaatkan Vue DevTools secara maksimal, dan troubleshooting masalah paling umum yang ditemui developer Pinia. Setelah episode ini, kalian akan punya workflow debugging yang sistematis.

#Vue DevTools dan Pinia

Vue DevTools menampilkan tab Pinia terpisah untuk seluruh store aplikasi. Di dalamnya kalian bisa melihat:

• State: nilai terkini setiap field, termasuk perubahan secara real-time.
• Getters: hasil kalkulasi derived state.
• Actions: daftar pemanggilan action beserta argumen dan hasilnya.
• Dependencies: komponen mana yang memakai store ini.

Pastikan ekstensi Vue DevTools aktif dan project berjalan dengan mode development. Kalau tab Pinia tidak muncul, restart aplikasi setelah Pinia dipasang di main.ts.

#Time-Travel

Fitur andalan DevTools adalah time-travel — memutar ulang urutan mutasi state:

npm run dev

Saat aplikasi berjalan, buka panel DevTools, tab Pinia, lalu jalankan beberapa action. Di bagian daftar mutasi, kalian bisa mengklik titik waktu sebelumnya — seluruh state akan kembali ke kondisi saat itu. Ini sangat berguna untuk menemukan action mana yang menyebabkan bug.

#Melacak Pemanggilan Action

Selain DevTools, Pinia menyediakan API $onAction untuk mendengar setiap pemanggilan action dari dalam kode. Ini berguna saat bug hanya muncul di lingkungan tertentu dan kalian ingin mencatat jejaknya:

Subscribe ke pemanggilan action

store.$onAction(({ name, args, after, onError }) => {
  console.log(`action ${name} dipanggil`, args)
  after((result) => {
    console.log(`${name} selesai`, result)
  })
  onError((error) => {
    console.error(`${name} gagal`, error)
  })
})

store.$onAction({...}) menerima callback dengan informasi nama action, argumen, hook after, dan hook onError. Jika pola ini mengingatkan pada $subscribe di episode 13, tebakan kalian benar — $subscribe memantau perubahan state, sedangkan $onAction memantau pemanggilan method store.

#Troubleshooting: State Tidak Reaktif

Masalah paling umum di Pinia: UI tidak pernah berubah padahal state sudah diubah. Penyebab hampir selalu destructuring biasa:

Penyebab state tidak reaktif

// SALAH: menyalin nilai, bukan referensi reaktif
const { count } = useCounterStore()
 
// BENAR: ambil ref yang tetap terhubung
const { count } = storeToRefs(useCounterStore())

const { count } = useCounterStore() menyalin angka begitu saja — perubahan di store tidak akan terlihat. Ganti dengan storeToRefs(useCounterStore()) agar count menjadi ref yang hidup.

#Troubleshooting: Perubahan Tidak Terdeteksi

Jika assignment seperti store.items.push(...) tidak memicu re-render, periksa apakah object yang ditulis benar-benar state reaktif, bukan salinan:

Perubahan yang tidak terdeteksi

// SALAH: array baru di luar store
const baru = [...store.items, item]
store.items = baru
 
// BENAR: mutasi langsung lewat patch function
store.$patch((state) => {
  state.items.push(item)
})

store.$patch((state) => state.items.push(item)) memastikan mutasi terjadi di dalam state reaktif, sehingga DevTools dan subscriber ikut mendeteksinya.

#Troubleshooting: Circular Store Dependency

Dua store yang saling memakai satu sama lain bisa membuat error di DevTools:

Pola yang memicu circular dependency

// stores/a.ts memakai useBStore, stores/b.ts memakai useAStore

Pinia biasanya menangani sirkular ini secara otomatis, tetapi bisa menjadi masalah di getters. Solusinya: pindahkan logika gabungan ke salah satu store saja, atau ke composable terpisah, agar ketergantungan mengalir satu arah.

#Penutup

Episode 10 membekali kalian kemampuan debugging yang sistematis. Kalian sekarang bisa meng-inspeksi store di Vue DevTools, memakai time-travel untuk menemukan penyebab bug, dan menangani tiga masalah umum: state tidak reaktif, perubahan tak terdeteksi, dan circular dependency.

Inti yang harus dibawa pulang:

• Tab Pinia di Vue DevTools menampilkan state, getters, actions, dan dependencies.
• Time-travel memutar ulang mutasi untuk menemukan action penyebab bug.
• State tidak reaktif biasanya karena destructuring tanpa storeToRefs.
• Mutasi array pakai $patch bentuk function agar terdeteksi.
• Circular dependency diselesaikan dengan alur ketergantungan satu arah.
• Beri nama action yang deskriptif untuk mempermudah debugging.

Di episode 11 selanjutnya kita akan membahas SSR dan integrasi Nuxt — membuat instance Pinia per-request di server, memakai module @pinia/nuxt untuk auto-setup, serta menangani hydration state agar tidak terjadi mismatch. Ini membuka Pinia untuk aplikasi server-rendered.