Setup Store 표준

13.1.1. Pinia 사용 원칙

• 상태 관리는 Pinia를 사용합니다. Vuex는 사용하지 않습니다.
• Setup Store 문법을 사용합니다. Options Store 문법은 사용하지 않습니다.
• Store 파일은 src/stores/ 디렉토리에 배치합니다.
• 파일명은 use{도메인}Store.ts 형식을 따릅니다.

---

13.1.2. Setup Store 구조

Setup Store는 Composition API의 setup() 함수와 동일한 방식으로 작성합니다.

• ref() → state
• computed() → getters
• function → actions

// src/stores/useUserStore.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import { fetchCurrentUser } from '@/api/user'
import type { User } from '@/types/user'

export const useUserStore = defineStore('user', () => {
  // state
  const user = ref<User | null>(null)
  const loading = ref(false)

  // getters
  const isLoggedIn = computed(() => user.value !== null)
  const displayName = computed(() => user.value?.name ?? '게스트')

  // actions
  async function loadCurrentUser() {
    loading.value = true
    try {
      user.value = await fetchCurrentUser()
    } finally {
      loading.value = false
    }
  }

  function logout() {
    user.value = null
  }

  return { user, loading, isLoggedIn, displayName, loadCurrentUser, logout }
})

---

13.1.3. Store 초기화

• Pinia 인스턴스는 main.ts에서 생성하고 Vue 앱에 등록합니다.
• 앱 시작 시 필요한 초기 데이터 로딩은 App.vue의 onMounted에서 수행합니다.

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

---

13.1.4. Store 사용 원칙

• 전역적으로 공유되어야 하는 상태만 Store에 배치합니다.
• 컴포넌트 로컬 상태는 ref/reactive로 관리합니다.
• Store 간 직접 참조는 최소화합니다.

상태 유형	관리 방식	예시
전역 상태	Pinia Store	로그인 사용자, 권한 정보, 테마 설정
페이지 상태	컴포넌트 ref	폼 입력값, 로딩 상태, 모달 표시 여부
서버 상태	Composable	API 응답 데이터, 페이지네이션