Belajar Pinia - Composing Stores

#Pendahuluan

Salah satu keunggulan Pinia adalah store yang modular dan bisa saling memakai. Alih-alih satu store raksasa berisi semua domain, kalian memecahnya menjadi store kecil per fitur, lalu menghubungkannya saat dibutuhkan. Pola ini disebut composing stores.

Episode 12 membahas cara memanggil store lain di dalam getter dan action, memecah domain menjadi store kecil, dan memakai pola reuse dengan contoh nyata: store cart yang bergantung pada store user.

#Memanggil Store dalam Getter

Store lain bisa dibaca di dalam getter lewat useXStore():

Getter memakai store user

import { useUserStore } from '@/stores/user'
 
export const useCartStore = defineStore('cart', {
  state: () => ({
    items: [] as { name: string; price: number; qty: number }[],
  }),
  getters: {
    isMemberPrice: () => {
      const userStore = useUserStore()
      return userStore.isMember
    },
  },
})

useUserStore() di dalam getter memberi akses ke state store lain. Karena getter dieksekusi saat store aktif, pemanggilan ini aman dan tetap reaktif terhadap perubahan store user.

#Memanggil Store dalam Action

Action juga bebas memanggil store lain, termasuk memicu action-nya:

Action memakai store lain

import { useUserStore } from '@/stores/user'
 
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] as { name: string; price: number }[] }),
  actions: {
    checkout() {
      const userStore = useUserStore()
      if (!userStore.isLoggedIn) {
        userStore.promptLogin()
        return false
      }
      return true
    },
  },
})

userStore.promptLogin() menjalankan action dari store lain. Koordinasi seperti ini menjaga satu tanggung jawab per store: cart mengelola item, user mengelola sesi login.

#Modular Design: Store Kecil per Domain

Prinsip utama arsitektur store Pinia adalah memecah domain:

• stores/auth.ts: sesi login, token, profil.
• stores/cart.ts: daftar item, kuantitas, total.
• stores/ui.ts: modal, sidebar, tema, notifikasi.

Struktur folder stores/

src/stores/
  auth.ts
  cart.ts
  ui.ts
  index.ts

Masing-masing store kecil, mudah diuji, dan berdiri sendiri. cart boleh bergantung pada auth untuk diskon member, ui boleh membaca auth untuk menampilkan menu yang berbeda, tetapi tidak ada store yang menumpuk seluruh logika aplikasi.

#Pola Reuse: Co-locate di Store Pemakai

Saat logika gabungan dipakai berulang, taruh logika tersebut sebagai action di salah satu store — bukan di komponen:

Action gabungan dua store

actions: {
  addToCartAndNotify(item) {
    this.addItem(item)
    const uiStore = useUiStore()
    uiStore.showToast(`${item.name} ditambahkan`)
  },
}

addToCartAndNotify(item) mengombinasikan mutasi cart dengan notifikasi UI dalam satu action. Komponen cukup memanggil satu method, dan tanggung jawab tetap tersebar ke store yang tepat.

#Penutup

Episode 12 memperlihatkan kekuatan Pinia sebagai sistem modular. Kalian sekarang bisa memanggil store lain di getter dan action, memecah aplikasi menjadi store kecil per domain, dan menerapkan pola reuse dengan koordinasi antar store.

Inti yang harus dibawa pulang:

• useXStore() dipanggil di dalam getter dan action store lain.
• Store berkoordinasi tanpa saling memiliki logika satu sama lain.
• Pecah domain menjadi store kecil: auth, cart, ui.
• Action gabungan diletakkan di store pemakai, bukan di komponen.
• Arah ketergantungan dijaga sesederhana mungkin.
• Modular design membuat store mudah diuji dan dirawat.

Di episode 13 selanjutnya kita akan membahas performance dan reactivity tuning — mengontrol re-render dengan storeToRefs dan akses granular, memakai $subscribe dengan opsi detached, serta membatch update dengan $patch untuk aplikasi yang lebih responsif.