Composition API Store

export const useTodoStore = defineStore("todos", () => {
  const todos = ref([])
  const filter = ref("all")

  const filteredTodos = computed(() => {
    if (filter.value === "done") return todos.value.filter(t => t.done)
    if (filter.value === "active") return todos.value.filter(t => !t.done)
    return todos.value
  })

  function addTodo(text) {
    todos.value.push({ id: Date.now(), text, done: false })
  }

  return { todos, filter, filteredTodos, addTodo }
})

Store Composition

Store lain bisa dipakai dari dalam sebuah store — berguna saat satu domain butuh state dari domain lain. Contoh nyata: useCartStore yang perlu tahu user login atau bukan.

export const useCartStore = defineStore("cart", () => {
  const authStore = useAuthStore(); // pakai store lain
  const items = ref([]);

  function addItem(product) {
    if (!authStore.isLoggedIn) {
      throw new Error("Harus login dulu");
    }
    items.value.push(product);
  }

  return { items, addItem };
});

Kapan composition berguna:

• Satu store perlu cek state store lain (cart cek auth, profile cek settings).
• Logika cross-domain yang tidak cocok ditaruh di satu store saja.
• Menghindari prop drilling melalui komponen hanya untuk membawa state global.

⚠️ Hati-hati dengan circular import — kalau A pakai B dan B pakai A, refactor logika ke store ketiga atau ke composable function.