pinia 아키텍처와 구성요소

Pinia는 Vue 3의 상태 관리를 위한 현대적인 아키텍처로 구성됨. 주요 아키텍처 구성 요소는 다음과 같음:

• 스토어(Store): Pinia에서 상태(State)를 정의하고 관리하는 기본 단위. 여러 스토어를 분리하여 기능별 상태를 모듈화할 수 있음.
• 상태(State): 애플리케이션의 전역 데이터로, 여러 컴포넌트에서 공유 및 업데이트가 가능.
• 게터(Getters): 상태를 조회하는 속성으로, Vue의 계산 속성(Computed Property)처럼 동작. 상태를 변형하여 컴포넌트에서 쉽게 사용할 수 있도록 함.
• 액션(Actions): 상태를 수정하는 함수로, 비동기 작업 및 상태 변경을 관리함. Pinia에서 액션은 상태를 직접 변경할 수 있음.

 

스토어 정의

Pinia에서 스토어는 defineStore 함수를 통해 정의하며, 이는 전역 상태 관리 단위로 작동함. 스토어는 상태, 게터, 액션으로 구성됨.

Pinia를 사용하도록 Vue 애플리케이션 인스턴스 설정

Pinia를 Vue 애플리케이션에 통합하려면 main.js 파일에서 애플리케이션에 Pinia를 플러그인으로 추가해야 함.

 컴포넌트에서 스토어 사용

Pinia에서 정의된 스토어는 useStore 함수를 통해 컴포넌트에서 사용할 수 있음. useStore 함수는 일반적으로 setup 함수 내부에서 호출함.