Belajar Pinia - State & Reactivity

#Pendahuluan

State adalah jantung sebuah store — sumber kebenaran yang dibaca oleh getters, diubah oleh actions, dan dirender oleh komponen. Setelah memahami anatomi store, kini saatnya memahami seluruh cara berinteraksi dengan state: membaca, mengubah, mereset, dan mengambilnya ke komponen tanpa kehilangan reactivity.

Episode 5 membedah empat API utama pengelolaan state Pinia: akses langsung, $patch, $reset, dan storeToRefs. Kesalahan paling umum di dunia Pinia — destructuring biasa yang membuat UI tidak pernah terupdate — akan kita bedah tuntas di sini.

#Mengakses State Secara Langsung

Cara paling sederhana untuk membaca dan menulis state adalah lewat instance store:

Akses state langsung

import { useCounterStore } from '@/stores/counter'
 
const store = useCounterStore()
 
console.log(store.count)
store.count = 10

Karena store dibungkus reactive, store.count = 10 langsung memicu pembaruan di komponen mana pun yang membaca store.count. Untuk satu assignment sederhana, pola ini adalah yang paling jernih.

#Mengubah Banyak Field dengan $patch

Saat kalian perlu mengubah beberapa field sekaligus, store.$patch lebih efisien daripada banyak assignment terpisah. Ada dua bentuk: object dan function:

Dua bentuk $patch

store.$patch({ count: 5, title: 'Lima' })
 
store.$patch((state) => {
  state.items.push({ id: 3, name: 'Baru' })
  state.count++
})

Bentuk object store.$patch({ count: 5 }) cocok untuk assignment sederhana. Bentuk function store.$patch((state) => ...) diperlukan untuk operasi seperti push ke array yang sulit ditulis sebagai object literal.

#Mereset State dengan $reset

Untuk mengembalikan state ke nilai inisial, gunakan $reset():

Reset state ke awal

store.$reset()

store.$reset() mengembalikan seluruh state ke nilai awal yang didefinisikan di state. Sangat berguna untuk tombol "reset form" atau sebelum sebuah test dimulai. Catatan: $reset hanya tersedia di Options store, karena Setup store tidak punya definisi state tunggal.

#Destructuring Reaktif dengan storeToRefs

Ini bagian yang paling sering salah dipahami. Destructuring biasa akan melepas koneksi reactivity:

Salah dan benar saat destructuring

// SALAH: reactivity hilang, UI tidak pernah update
const { count } = useCounterStore()
count++
 
// BENAR: tetap reaktif
import { storeToRefs } from 'pinia'
const { count } = storeToRefs(useCounterStore())
count.value++

const { count } = storeToRefs(useCounterStore()) menghasilkan ref, sehingga saat di template kalian menulis count (auto-unwrap), dan di kode menulis count.value. Destructuring biasa menyalin nilai saat itu juga — mengubahnya tidak akan pernah sampai ke store.

#Ringkasan Pola yang Disarankan

Sebagai panduan cepat:

• Satu field dibaca di template: store.count langsung.
• Beberapa field di-destructure: storeToRefs(store).
• Update satu field: assignment langsung.
• Update banyak field: $patch.
• Kembali ke awal: $reset() (Options store).
• Panggil action: destructure langsung dari store.

Pola lengkap dalam satu komponen

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
 
const store = useCounterStore()
const { count, double } = storeToRefs(store)
const { increment } = store

const { increment } = store aman untuk action karena action tidak reaktif — dia tetap terikat ke store yang sama. Gabungan dua baris destructuring ini adalah pola paling umum di project Pinia.

#Penutup

Episode 5 menutup fondasi state Pinia. Kalian sekarang bisa membaca dan mengubah state secara langsung, melakukan update multi-field dengan $patch, mereset dengan $reset, dan melakukan destructuring reaktif dengan storeToRefs tanpa jebakan reactivity.

Inti yang harus dibawa pulang:

• Akses langsung store.count tetap reaktif.
• $patch untuk update banyak field sekaligus.
• $patch bentuk function untuk operasi array.
• $reset() mengembalikan state ke nilai awal.
• Destructuring biasa mematikan reactivity; gunakan storeToRefs.
• storeToRefs hanya memetakan state dan getters, bukan actions.

Di episode 6 selanjutnya kita akan membahas getters — computed properties milik store untuk derived state, termasuk mengakses state store lain, getter dengan parameter yang mengembalikan function, dan perilaku memoization yang wajib dipahami. Ini akan membuat template kalian jauh lebih bersih.