Belajar Pinia - Fitur Stabil Terbaru (v4.x)

#Pendahuluan

Teknologi tidak pernah berhenti, dan Pinia juga begitu. Menjelang rilis terbaru, tim Pinia terus menyempurnakan types, kompatibilitas dengan Vue terbaru, dan ekosistem pendukungnya. Episode ini memetakan kondisi Pinia v4 dan ekosistem 2026.

Episode 20 membahas fitur stabil terbaru: apa yang berubah di Pinia v4.x, kompatibilitas dengan Vue 3.5+, serta posisi library pendukung seperti @pinia/nuxt, @pinia/testing, dan Pinia Colada.

#Apa yang Baru di Pinia v4.x

Pinia v4.0.x dirilis Juli 2026 sebagai major update yang membawa perbaikan menyeluruh:

• Perbaikan types: inference dan kompatibilitas generic yang lebih akurat, terutama untuk Setup store dan plugin.
• Kompatibilitas Vue 3.5+: memanfaatkan reactivity terbaru Vue tanpa mengubah API Pinia.
• Integrasi @pinia/nuxt 1.x: setup module yang lebih mulus dengan Nuxt terbaru.

Salah satu perbaikan yang paling terasa adalah inference tipe pada Setup store. Perhatikan contoh state dan getter dalam satu definisi:

Type inference di Setup store

export const useThemeStore = defineStore('theme', () => {
  const mode = ref<'light' | 'dark'>('light')
  const isDark = computed(() => mode.value === 'dark')
  return { mode, isDark }
})

Di v4, ref<'light' | 'dark'> disimpulkan otomatis oleh TypeScript, sehingga kalian tidak perlu menuliskan generic defineStore<string, ...> secara eksplisit. Akibatnya store.mode dan store.isDark ter-typed dengan benar di komponen — editor memberi autocomplete dan error sejak menulis, bukan saat runtime. Perbaikan ini terasa paling besar di project yang menulis banyak Setup store.

Kuncinya: API inti Pinia — defineStore, createPinia, storeToRefs — tetap stabil. Upgrade ke v4 tidak mengharuskan penulisan ulang store yang sudah kalian pelajari di episode 0-19.

npm view pinia version
npm view @pinia/nuxt version

npm view pinia version dan npm view @pinia/nuxt version menampilkan versi terbaru di registry. Verifikasi ini penting sebelum upgrade agar dokumentasi yang kalian baca sesuai versi.

#Kompatibilitas Vue 3.5+

Pinia v4 dirancang di atas Vue 3.5+ yang membawa perbaikan performa reactivity dan dukungan tipe yang lebih baik. Yang perlu kalian ketahui:

• ref dan reactive bekerja seperti biasa — tidak ada perubahan sintaks store.
• Upgrade Pinia ke v4 bersamaan dengan upgrade Vue ke 3.5+ untuk hasil terbaik.
• Seluruh pola di series ini tetap berlaku tanpa modifikasi.

Karena kompatibilitas ke belakang dijaga, project yang memakai Vue 3.4 pun umumnya bisa upgrade tanpa patah — tetapi kombinasi resmi yang direkomendasikan adalah Vue 3.5+ dengan Pinia v4.

#Migrasi dari v3 ke v4

Migrasi pada umumnya semudah mengganti versi di package.json lalu menjalankan npm i. Tidak ada perintah rename seperti saat Vue 2 pindah ke Vue 3; yang perlu diperhatikan hanyalah area yang berhubungan dengan types:

Store yang sama di v3 dan v4

// v3 dan v4 menerima kode ini tanpa perubahan
export const useUserStore = defineStore('user', {
  state: () => ({
    profile: null as Profile | null,
  }),
  getters: {
    isLoggedIn: (state) => state.profile !== null,
  },
})

null as Profile | null tetap bekerja di v4 berkat inference generic yang lebih baik. Di rilis lama, kombinasi generic seperti defineStore<string, State, Getters, Actions> kadang memaksa penulisan keempat parameter secara eksplisit; di v4 parameter tersebut disimpulkan otomatis sehingga kode store terasa lebih ringkas.

Langkah migrasi yang disarankan:

• Cadangkan branch sebelum upgrade.
• Update Vue ke 3.5+ dan Pinia ke 4.x pada saat yang bersamaan.
• Jalankan bun run typecheck dan selesaikan seluruh error.
• Jalankan test suite — terutama test store dengan @pinia/testing.

Jika seluruh test hijau dan tidak ada error types, migrasi praktis selesai. Sisa waktu sebaiknya dipakai untuk mengeksplorasi perbaikan types yang memungkinkan penyederhanaan kode store.

#Ekosistem 2026

Tiga library pendukung kini stabil dan menjadi standar:

• @pinia/nuxt 1.0.x: module Nuxt resmi — auto-setup Pinia, hydration otomatis (episode 11).
• @pinia/testing 2.x: utility testing dengan createTestingPinia (episode 17).
• Pinia Colada: async server state yang kini stabil — fetching, caching, dan deduplication (episode 14).

pinia: 4.0.2
@pinia/nuxt: 1.0.1
@pinia/testing: 2.0.x

Ketiganya bekerja bersama: Nuxt untuk SSR, testing untuk kualitas, dan Colada untuk server state. Inilah stack lengkap Pinia di tahun 2026.

#Penutup

Episode 20 memetakan kondisi Pinia terkini. Kalian sekarang tahu apa yang berubah di Pinia v4.x, mengapa Vue 3.5+ jadi pasangan yang direkomendasikan, dan posisi tiga library pendukung yang kini stabil: @pinia/nuxt, @pinia/testing, dan Pinia Colada.

Inti yang harus dibawa pulang:

• Pinia v4.0.x (Juli 2026) membawa perbaikan types dan kompatibilitas Vue 3.5+.
• API inti Pinia tetap stabil — upgrade tanpa menulis ulang store.
• @pinia/nuxt 1.x menyederhanakan integrasi Nuxt.
• @pinia/testing 2.x dan Pinia Colada kini stabil.
• Verifikasi versi dengan npm view sebelum upgrade.
• Stack 2026: Pinia + Nuxt + testing + Colada untuk server state.

Di episode 21 selanjutnya kita akan membahas production-ready architecture — arsitektur store untuk skala tim, konvensi penamaan dan dokumentasi, penggunaan Vue Query atau Colada untuk server state, serta kualitas produksi: type-check, lint, test coverage, monitoring, dan bundle size.