Belajar Pinia - Options Store vs Setup Store

#Pendahuluan

Pinia punya satu konsep store, tetapi dua gaya menuliskannya: Options store dan Setup store. Keduanya setara dalam kemampuan — state, getters, actions, akses store lain, bahkan SSR — sehingga pilihan lebih banyak soal konvensi dan kebutuhan tim.

Episode 4 akan menulis store yang sama persis dalam dua gaya itu, membedah perbedaan sintaksnya, lalu membahas keunggulan Setup store dalam memakai composable eksternal. Setelah episode ini, kalian akan lancar membaca kode Pinia dalam bentuk apa pun.

#Options Store

Options store adalah gaya klasik: sebuah object dengan properti state, getters, dan actions. Gaya ini sangat dekat dengan Vuex, jadi tim yang pindah dari Vuex akan langsung merasa familiar:

Options store di src/stores/user.ts

import { defineStore } from 'pinia'
 
export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Arman',
    age: 25,
  }),
  getters: {
    isAdult: (state) => state.age >= 18,
    greeting: (state) => `Halo, ${state.name}!`,
  },
  actions: {
    celebrate() {
      this.age++
    },
  },
})

Di Options store, getters menerima state sebagai parameter pertama, dan actions mengakses semuanya lewat this. defineStore('user', ...) tetap dibutuhkan dengan id unik, dan hasil akhirnya sama dengan Setup store.

#Setup Store

Setup store ditulis sebagai function Composition API. State menjadi ref, getters menjadi computed, dan actions menjadi fungsi biasa:

Setup store yang setara di src/stores/user.ts

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
 
export const useUserStore = defineStore('user', () => {
  const name = ref('Arman')
  const age = ref(25)
 
  const isAdult = computed(() => age.value >= 18)
  const greeting = computed(() => `Halo, ${name.value}!`)
 
  function celebrate() {
    age.value++
  }
 
  return { name, age, isAdult, greeting, celebrate }
})

Perhatikan polanya: semua ref, computed, dan fungsi dikembalikan dalam satu object. Di dalam template, reactivity bekerja lewat .value di kode, tetapi otomatis ter-unwrap saat diakses dari store instance.

#Keunggulan Setup Store: Memakai Composable

Keunggulan utama Setup store adalah kemampuan memakai composable lain di dalamnya. Composable yang kalian tulis untuk komponen bisa langsung dipakai di store:

Composable di dalam Setup store

import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'
 
export const useSettingsStore = defineStore('settings', () => {
  const theme = useLocalStorage('theme', 'light')
 
  function toggleTheme() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
 
  return { theme, toggleTheme }
})

useLocalStorage('theme', 'light') dari VueUse tidak bisa dipakai di Options store tanpa trik, tetapi di Setup store berjalan natural karena fungsi store dieksekusi seperti composable biasa.

#Kapan Memilih Masing-masing

Tidak ada jawaban mutlak, tetapi ada panduan yang sering dipakai tim:

• Options store untuk tim yang baru pindah dari Vuex, atau saat seluruh logika store sederhana dan hanya butuh state, getters, actions.
• Setup store untuk project yang sudah menekankan Composition API, saat store butuh composable, atau saat ingin type inference yang paling fleksibel.
• Campuran keduanya dalam satu codebase itu sah, asal konsisten per store.

#Penutup

Episode 4 menunjukkan bahwa Options store dan Setup store adalah dua wajah dari konsep yang sama. Kalian sekarang bisa menulis store dalam dua gaya, memahami keunggulan Setup store dalam memakai composable, dan memilih gaya sesuai konteks tim.

Inti yang harus dibawa pulang:

• Options store memakai object state, getters, actions.
• Setup store memakai ref, computed, dan fungsi biasa.
• Keduanya setara dalam kemampuan, SSR, dan DevTools.
• Setup store bebas memakai composable seperti VueUse di dalamnya.
• Actions Options store memakai this; Setup store memakai closure.
• Campuran gaya diperbolehkan selama konsisten per store.

Di episode 5 selanjutnya kita akan membahas state dan reactivity — mengakses state secara langsung, update banyak field sekaligus dengan $patch, mereset store dengan $reset, dan menjaga reactivity saat destructuring memakai storeToRefs. Ini fondasi penting untuk memahami getters dan actions di episode 6 dan 7.