Pinia

Pinia?

Pinia는 Vue3에서 추천하는 상태 관리 라이브러리이다.

Composition API에 익숙하다면 이미 export const state = reactive({}) 처럼 API를 활용하여 Global State를 간단히 만들 수 있다. 하지만 이러한 방법은 Single Page Application에 해당하는 방법이며 서버 사이드 렌더링이 되는 경우 애플리케이션이 보안 취약성에 노출될 수 있다.

Pinia는 기본적으로 위와 같이 state, actions, getters의 구조로 되어 있다. 

Pinia의 장점

• Devtools 지원
  • mutations, actions를 추적하는 타임라인
  • Store를 컴포넌트에서 확인 가능하다
  • Time travel과 더 쉬운 디버깅
• Hot module replacement 지원
  • 페이지 리로딩 없지 store 수정
  • 개발하는 동안 기존 state 유지
• 플러그인: 플러그인으로 Pinia 기능 확장
• 서버 사이드 렌더링 지원

Pinia vs. Vuex?

• Pinia에서는 mutations이 없어졌다.
  • action의 사용을 권장한다.
• TypeScript 대응이 좋아졌다. API는 TypeScript 타입 추론을 최대한 활용하는 방식으로 설계되었다.
• Autocompletion 기능이 개선되었다.