1.
Pinia
우재성

2.
Pinia?
• Vue3 에서 Vuex를 대체하기 위한 상태관리 도구
• Vue.js 전용 경량 상태관리 도구
• Vue3 공식문서에서 권장 (Vue2에서도 사용가능)
• SFC 문법 - Composition API 지원
• TypeScript 지원

3.
구성요소
State
Actions Getters

4.
But..

5.
Composition API
• 컴포넌트의 로직을 유연하게 구성할 수 있도록 하는 함수 기반의 API
• 기존 Vue에 비해 코드 재사용성과 타입추론 개선
• 가시성 향상(그룹핑)
• React hook과 유사한 방식

6.
사용

7.
SFC 문법 지원
• 기존 Vue에 이식되어도 자연스럽게 동작
• Vuex의 구조로 정의하지 않아도 됨
• Composition API Hooks를 이용해서 작성가능
(ref, reactive, computed, watch 등..)

8.
장점
폭 넓은 개발 스타일
Vuex보다 나아진 TypeScript 환경
React와 유사한 구조
단순화된 구조, 집중된 기능
Devtools 지원, 플러그인 기능 확장

9.
출처
• https://mine-it-record.tistory.com/639
• https://pinia.vuejs.org/
• https://geundung.dev/102
• https://www.univdev.page/posts/about-pinia/
• https://appmaster.io/ko/blog/vue3-dangsini-algo-sipeun-modeun-geos
• https://velog.io/@doodung/Vue.js-SFC