Vue.js의 상태 관리 도구 : Pinia

Pinia란 무엇인가

Pinia는 Vue 3에서 공식적으로 권장하는 상태 관리 라이브러리다.

이전까지 Vue의 상태 관리는 Vuex가 사실상 표준이었지만, Vue 3 이후로는 Pinia가 새로운 공식 대안이 되었다.

Vuex의 복잡한 구조를 대체하기 위해 설계되었으며,

Composition API에 맞춰 가볍고 선언적인 방식으로 상태를 정의하고 사용할 수 있게 한다.

핵심적으로 Pinia는 아래 세 가지로 상태 관리를 구성한다:

• state: 공유할 데이터
• getters: 계산된 값 (computed)
• actions: 상태를 변경하는 함수 (methods)

기본 설계 철학은 단순함, 타입 안전성, Composition API 친화적 구조다.

---

왜 Vuex 대신 Pinia인가

Vuex는 mutations, actions, modules, strict mode, mapXXX helpers 등 복잡한 구조를 가지고 있었다.

작은 프로젝트에서도 수많은 보일러플레이트 코드가 필요했다. 반면, Pinia는 다음과 같은 장점이 있다.

1. Mutation 없이 직접 state 변경 가능
   Vuex는 commit()을 통해서만 state를 바꿀 수 있었지만, Pinia는 그냥 this.count++ 하면 된다.
2. 타입스크립트 자동 지원
   별도 설정 없이도 타입 추론이 깔끔하게 동작한다.
3. Composition API와 완벽한 호환
   defineStore()를 Composition API 안에서 바로 쓸 수 있다.
4. 모듈 시스템이 기본값
   store를 여러 개로 나눌 수 있고, 각 store는 독립적으로 작동한다.

---

설치 및 설정

npm install pinia

main.js에서 앱에 등록한다.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

---

기본 스토어 정의 예시

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Vue'
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    greeting: (state) => `Hello, ${state.name}`
  },
  actions: {
    increment() {
      this.count++
    },
    setName(newName) {
      this.name = newName
    }
  }
})

• defineStore('counter', {...})에서 'counter'는 이 스토어의 고유 ID이다.
• state는 함수로 정의하며, 반환한 객체가 반응형으로 관리된다.
• getters는 computed처럼 동작한다.
• actions는 methods처럼 사용한다. 비동기 함수도 가능하다.

---

컴포넌트에서 사용하기

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

counter.increment()
</script>

<template>
  <p>{{ counter.count }}</p>
  <p>{{ counter.doubleCount }}</p>
  <button @click="counter.increment">+1</button>
</template>

 

store는 Composition API 기반으로 동작하므로 useCounterStore()로 store 인스턴스를 가져온다.

이 인스턴스는 전역에서 공유되며 싱글톤이다.

---

비동기 처리 예시

 

actions: {
  async fetchUser() {
    const res = await fetch('/api/user')
    const data = await res.json()
    this.name = data.name
  }
}

actions 안에서는 async/await를 자유롭게 사용할 수 있다. 이는 Vuex보다 훨씬 직관적인 구조다.

---

모듈 구조로 확장

프로젝트 규모가 커질수록 store도 기능별로 나눈다.

stores/
├── auth.js
├── user.js
├── todo.js

각각 defineStore()로 만들고, 필요한 곳에서 useAuthStore(), useTodoStore() 등으로 꺼내 쓴다.

---

디버깅과 DevTools

Pinia는 Vue DevTools와 완벽하게 연동된다.
상태 변화 추적, time-travel debugging, 상태 snapshot 저장, mutation 로그 등을 지원한다.

Vuex처럼 별도 설정 없이 바로 사용 가능하다.

---

마무리

Pinia는 Vue 3의 상태 관리를 위한 새로운 기본값이다.

Vuex보다 가볍고, 코드가 간결하며, Composition API와의 결합이 유연하다.

작은 프로젝트부터 대형 SPA까지 무리 없이 확장 가능하며, 러닝 커브가 낮아 빠르게 도입할 수 있다.

Vue 3 기반의 프로젝트를 시작한다면 별다른 고민 없이 Pinia를 기본 상태 관리 도구로 사용하는 것이 가장 합리적이다