[Vue.js] Vuex vs. Pinia

이번엔 Vue.js 에서 상태 관리 목적으로 사용하는 라이브러리인 Vuex 와 Pinia 에 대해 비교하는 글을 작성하려고 한다.

 

결론부터 이야기 하자면, 

Vuex 는 규칙이 많은 전통적인 중앙 상태 관리 (Vue 2 에서 사용) 이고,

Pinia 는 가볍고 직관적인 현대적인 상태 관리 (Vue 3 에서 사용) 이다.

 

1. Vuex

- Flux 패턴 기반

- 전역 상태를 중앙에서 관리

- TypeScript 지원이 불편

- Composition API 와 궁합이 좋지 않음

- 구성 요소

  > State : 전역으로 관리되는 상태

  > Getter : state 의 계산된 값

  > Mutation : state 를 동기적으로만 변경

  > Action : 비동기 처리 후 mutation 호출

  > Module : store 를 기능별로 분리

 

2. Pinia

- Composition API 기반

- Store 를 필요할 때만 로드 (lazy)

- 구성 요소

  > State : 반응형 상태

  > Getters : computed 역할

  > Actions : 동기 / 비동기 모두 처리

  > Mutation 없음