Vuex 와 Pinia 비교

Vuex와 Pinia는 Vue.js 애플리케이션에서 상태 관리를 제공하는 라이브러리입니다. Vuex는 Vue의 공식 상태 관리 라이브러리이고, Pinia는 Vue 3와 함께 등장한 경량 상태 관리 솔루션으로, Vuex의 복잡성을 줄이고 더 직관적인 사용법을 제공합니다.

 

Vuex가 무엇인가요? | Vuex

 

Pinia | The intuitive store for Vue.js

 

2024년 9월을 기준으로 npm 다운로드 수를 pinia 가 앞서기 시작했습니다. (스크린샷 기준 24.11.22.)

pinia vs vuex ❘ npm trends

 

아래는 두 상태 관리 라이브러리의 차이점, 장단점, 사용 예시를 비교한 내용입니다.

---

Vuex

특징

• Vue의 공식 상태 관리 라이브러리.
• Flux 패턴 기반으로 설계됨.
• Mutations와 Actions를 통해 상태를 변경.
• Vue 2와 Vue 3 모두 지원.

장점

• Vue의 공식 라이브러리로, 문서와 커뮤니티가 풍부함.
• 대규모 애플리케이션에서 구조화된 상태 관리가 가능.
• DevTools 지원이 강력하며 디버깅이 쉬움.

단점

• Flux 패턴으로 인해 학습 곡선이 있음.
• Mutations, Actions 등 상태 변경 로직이 분리되어 복잡함.
• boilerplate 코드가 많음.

---

Pinia

특징

• Vue 3에서 사용하기 위해 설계된 새로운 상태 관리 라이브러리.
• Composition API를 기반으로 동작.
• Mutations 없이 Actions와 Getters로 상태를 관리.
• 모듈화를 지원하고 타입스크립트 친화적.

장점

• Vuex에 비해 코드가 간결하고 직관적.
• Mutations 없이 상태 변경이 가능하여 코드 작성량 감소.
• 타입스크립트 친화적으로, 타입 정의와 자동 완성이 쉬움.
• Composition API와 잘 통합되어 Vue 3 프로젝트에서 사용하기 적합.

단점

• Vuex에 비해 상대적으로 문서와 커뮤니티가 적음.
• Vue 3 전용(새로운 프로젝트에서는 장점이 될 수 있음).

---

주요 차이점

항목	Vuex	Pinia
설계 방식	Flux 패턴	Composition API 기반
상태 변경 방식	Mutations, Actions 사용	Actions에서 상태 직접 변경
코드 간결성	비교적 boilerplate 코드가 많음	간결하고 직관적
타입스크립트 지원	Vuex 4에서 기본 지원 (Vuex 3는 제한적)	기본적으로 타입스크립트에 친화적
Vue 버전 지원	Vue 2와 Vue 3 모두 지원	Vue 3 전용
DevTools 지원	Vue DevTools 완전 지원	Vue DevTools 지원
모듈화	네임스페이스를 이용한 모듈화 지원	모듈화가 기본적으로 간편함
학습 곡선	Flux 패턴 학습 필요	Vue 3 Composition API 기반으로 간단

---

코드 비교

Vuex 예시

// store.js
import { createStore } from 'vuex';

export const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

// main.js
import { createApp } from 'vue';
import { store } from './store';
import App from './App.vue';

createApp(App).use(store).mount('#app');

Pinia 예시

// store.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    incrementAsync() {
      setTimeout(() => {
        this.increment();
      }, 1000);
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

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

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

---

선택 기준

Vuex를 선택해야 할 때

• Vue 2 기반 프로젝트를 유지보수하거나 확장할 때.
• 기존 Vuex 프로젝트가 이미 존재하고, 새로운 도구로 전환하기 어렵거나 필요성이 없을 때.
• 복잡한 애플리케이션에서 Flux 패턴에 익숙한 팀이 있을 때.

Pinia를 선택해야 할 때

• 새로운 Vue 3 프로젝트를 시작할 때.
• Composition API와의 통합이 중요한 경우.
• 상태 관리 로직을 간결하고 유지보수하기 쉽게 구성하려는 경우.
• 타입스크립트를 적극적으로 활용하려는 경우.

---

결론

• Vuex는 대규모 애플리케이션과 Vue 2 프로젝트에서 여전히 강력하며 안정적인 상태 관리 솔루션입니다.
• Pinia는 Vue 3와 Composition API 기반의 더 간결하고 최신화된 상태 관리 도구로, 새로운 Vue 3 프로젝트에 적합합니다.

프로젝트의 요구 사항과 팀의 기술 스택에 따라 적합한 상태 관리 라이브러리를 선택하세요!

 

같이 읽어보면 좋을 글

소개 | Pinia

Pinia | The intuitive store for Vue.js

Vue.js 상태관리 라이브러리 도입기(Pinia와 VueX를 비교해봅시다!)

Vue.js 상태관리 라이브러리 도입기(Pinia와 VueX를 비교해봅시다!)

(번역) Vuex와 비교한 Pinia의 장점

(번역) Vuex와 비교한 Pinia의 장점