Nuxt 대시보드 프로젝트 시리즈 (3): Pinia를 이용한 상태 관리 설계

// stores/app.ts
import { defineStore } from 'pinia'
 
export const useAppStore = defineStore('app', () => {
  // 상태 (State)
  const isSidebarCollapsed = ref(false)
  const theme = ref<'light' | 'dark'>('light')
 
  // 액션 (Actions)
  function toggleSidebar() {
    isSidebarCollapsed.value = !isSidebarCollapsed.value
  }
 
  function toggleTheme() {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
 
  return { isSidebarCollapsed, theme, toggleSidebar, toggleTheme }
})

// stores/auth.ts
export const useAuthStore = defineStore('auth', () => {
  const user = ref({
    name: '관리자',
    role: 'ADMIN',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Admin'
  })
 
  const isLoggedIn = computed(() => !!user.value)
 
  return { user, isLoggedIn }
})

<script setup>
import { useAppStore } from '@/stores/app'
 
const appStore = useAppStore()
</script>
 
<template>
  <button @click="appStore.toggleSidebar">
    {{ appStore.isSidebarCollapsed ? '열기' : '닫기' }}
  </button>
</template>