Belajar Pinia - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Semua framework state management punya konsep inti. Di Pinia, konsep itu disebut store: sebuah entitas reaktif yang menyimpan data, logika turunan, dan aksi bersama dalam satu unit. Memahami anatomi store adalah kunci untuk memahami seluruh series ini.

Episode 2 membedah arsitektur utama Pinia: tiga bagian penyusun store, cara kerja Pinia di balik layar, serta dua gaya menulis store. Kalian belum perlu menulis store yang rumit — episode ini membangun bahasa bersama agar episode berikutnya lancar.

#Anatomi Store

#state: Data Reaktif

state adalah sumber kebenaran sebuah store. Didefinisikan sebagai function yang mengembalikan object, sehingga setiap instance store punya data yang benar-benar baru:

Anatomi store lengkap

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

defineStore('counter', ...) menerima id unik sebagai argumen pertama — id inilah yang membedakan store satu dengan lainnya di dalam aplikasi.

#getters: Derived State

getters adalah computed properties milik store. Nilainya dihitung dari state dan otomatis diperbarui saat state berubah. Karena berupa computed, hasilnya dimemoize selama dependency-nya tidak berubah.

#actions: Mutasi dan Efek Samping

actions adalah method yang boleh mengubah state, memanggil API, mengatur timer, dan memanggil store lain. Di dalam action, this menunjuk ke instance store sehingga kalian bisa mengakses state dan getters lain.

#Cara Kerja di Balik Layar

#Store Dibungkus reactive

Saat sebuah store dipakai pertama kali, Pinia membuat store tersebut sebagai object reactive di dalam instance Pinia. Akibatnya, mengakses store.count di komponen akan melacak dependency layaknya ref biasa — ketika nilainya berubah, komponen yang mengonsumsinya ikut re-render.

#storeToRefs dan Plugin System

Karena store adalah object reactive, destructuring biasa akan menghilangkan reactivity. Pinia menyediakan storeToRefs(store) untuk mengambil state dan getters sebagai ref — akan kita bahas tuntas di episode 5. Di sisi lain, plugin system Pinia memungkinkan penambahan properti ke semua store secara global, seperti localStorage sync atau logger.

#Konsep Kunci

#createPinia dan app.use

Pinia dipasang ke aplikasi lewat dua langkah: membuat instance dengan createPinia(), lalu mendaftarkannya dengan app.use(pinia). Di aplikasi dengan lebih dari satu instance Pinia — misalnya saat SSR — setiap request mendapat instance sendiri:

Pasang Pinia ke aplikasi

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

createPinia() menciptakan instance, dan app.use(pinia) mengaktifkannya untuk seluruh aplikasi. Setelah ini, store bisa dipanggil dari mana pun di dalam komponen.

#Options Store vs Setup Store

Pinia menyediakan dua gaya menulis:

• Options store: memakai object dengan state, getters, actions — dekat dengan Vuex, nyaman untuk tim yang baru pindah.
• Setup store: memakai function Composition API yang mengembalikan ref, computed, dan fungsi — lebih fleksibel karena bisa memakai composable lain di dalam store.

Kedua gaya tersebut menulis hal yang sama dengan bentuk yang berbeda:

Dua gaya menulis store

// Options store
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: { increment() { this.count++ } },
})
 
// Setup store
export const useCounterStoreSetup = defineStore('counter-setup', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  return { count, double, increment }
})

Perhatikan perbedaannya: di Options store, this.count++ dipakai karena state dan getters tersedia sebagai properti. Di Setup store, kalian memakai ref dan computed langsung seperti di dalam komponen — tidak ada this, dan hasilnya di-return secara eksplisit. Kedua bentuk mengakses store.count, store.double, dan store.increment() dengan cara yang sama dari komponen.

Keduanya punya kemampuan setara; pilihan adalah soal selera dan konvensi tim. Detailnya dibandingkan langsung di episode 4.

#Penutup

Episode 2 memberi kalian peta arsitektur Pinia. Kalian sekarang memahami tiga bagian penyusun store — state, getters, actions — cara store bekerja sebagai object reactive, instalasi lewat createPinia dan app.use, serta dua gaya penulisan store.

Inti yang harus dibawa pulang:

• Store terdiri dari state (data), getters (turunan), dan actions (mutasi plus efek samping).
• defineStore butuh id unik sebagai argumen pertama.
• Store adalah object reactive, sehingga akses propertynya terlacak otomatis.
• storeToRefs diperlukan saat destructuring agar reactivity tidak hilang.
• Instalasi: createPinia() lalu app.use(pinia).
• Options store dan Setup store punya kemampuan setara.

Di episode 3 selanjutnya kita akan melakukan setup instalasi dan membuat store pertama — menginstall pinia, mendaftarkannya ke aplikasi, mendefinisikan store counter dengan action increment, dan memakainya langsung di dalam komponen Vue. Ini saatnya menulis kode nyata.