여러 화면이 공유하는 업무 상태와 변경 규칙을 store로 관리합니다.
Pinia store는 state, getter, action을 이름 있는 단위로 묶습니다. 컴포넌트 로컬 상태와 서버 캐시까지 모두 store에 넣지 않고 공유 필요성과 수명을 기준으로 선택합니다.
action은 업무 사건을 표현하고 state 직접 변경 경로를 줄여 추적 가능성을 높입니다.
storeToRefs를 사용하면 구조 분해 후에도 state와 getter 반응성이 유지됩니다.
API 응답 전체와 임시 폼 입력을 하나의 전역 store에 모으면 수명과 초기화가 복잡해집니다.
로컬 프로젝트에서 확인해보세요remove action과 남은 항목 getter를 추가하세요.
<script setup>
import { createPinia, defineStore, setActivePinia, storeToRefs } from "pinia";
setActivePinia(createPinia());
const useTasks = defineStore("tasks", {
state: () => ({ items: [] }),
getters: { count: (s) => s.items.length },
actions: {
add(title) {
this.items.push({ id: crypto.randomUUID(), title });
},
},
});
const store = useTasks();
const { items, count } = storeToRefs(store);
</script>
<template>
<main>
<button @click="store.add('Vue 복습')">추가</button>
<p>{{ count }}개</p>
<ul>
<li v-for="item in items" :key="item.id">{{ item.title }}</li>
</ul>
</main>
</template>