Pinia

경고: 이 기술은 GitLab의 새로운 기술이므로 모든 필요한 주의 사항과 모범 사례가 아직 갖춰지지 않았을 수 있습니다. Pinia 사용을 고려 중이라면 평가를 위해 ‘frontend’ 내부 Slack 채널에 메시지를 남겨주세요.

Pinia는 Vue 애플리케이션의 클라이언트 측 상태를 관리하기 위한 도구입니다. Pinia 사용 방법에 대해서는 공식 문서를 참조하세요.

모범 사례

작은 스토어

단일 작업에 중점을 둔 작은 스토어를 만드는 것을 선호합니다. 이는 큰 스토어를 만들 것을 권장하는 Vuex 접근 방식과는 반대됩니다.

Pinia 스토어를 거대한 상태의 행림이 아닌 일관성 있는 구성 요소로 다루세요 (Vuex 모듈).

단일 파일 스토어

상태, 액션, 그리고 게터를 하나의 파일에 배치하세요. actions.js, state.js, getters.js에서 모든 것을 가져오는 ‘barrel’ 스토어 인덱스 파일을 만들지 마세요.

스토어 파일이 너무 커지면 여러 개의 스토어로 분할할 시간입니다.

옵션 스토어 사용

Pinia는 두 종류의 스토어 정의를 제공합니다: 옵션과 설정. 새로운 스토어를 만들 때는 옵션 타입을 선호하세요. 이는 일관성을 유지하고 Vuex에서의 마이그레이션 경로를 간소화할 것입니다.

Pinia 이전

flowchart TD A[스토어] A --> B[상태] A --> C[액션] A --> D[변이] A --> E[게터] B --> F[아이템] B --> G[아이템 로딩 중인지 여부] B --> H[활성 폼 아이템] B --> I[폼 제출 중인지 여부]

Pinia 이후

flowchart TD A[아이템 스토어] A --> B[상태] A --> C[액션] A --> D[게터] B --> E[아이템] B --> F[로딩 중] H[폼 스토어] H --> I[상태] H --> J[액션] H --> K[게터] I --> L[활성 아이템] I --> M[제출 중인지 여부]

Vuex에서의 마이그레이션

먼저 주요 상태 관리자를 결정하세요. 그 후 Pinia를 선택했다면 이 안내를 진행하세요.

공식 Vuex 마이그레이션 가이드를 따르세요.

모든 마이그레이션을 두 단계로 나누어 시도해보세요:

단순히 Vuex API를 리팩터링하세요: 스토어 구조를 변경하지 말고 Pinia에서 작동하는지 확인하세요 (예시).
구조를 리팩터링하세요: 스토어를 여러 개의 작고 목적이 명백한 스토어로 분할해보세요.

중첩된 모듈을 가진 스토어 마이그레이션

중첩된 모듈을 갖고 있고 서로 의존성이 있는 스토어를 순차적으로 마이그레이션하는 것은 쉽지 않습니다. 이러한 경우 중첩된 모듈을 먼저 마이그레이션하는 것을 선호하세요:

중첩된 Vuex 스토어 모듈의 Pinia 스토어 상응편을 만드세요.
해당하는 경우 루트 모듈 의존성을 위한 Pinia ‘루트’ 스토어를 만드세요.
마이그레이션된 모듈에 대한 기존 테스트를 복사하고 적합하게 조정하세요.
아직 마이그레이션된 모듈은 사용하지 마세요.
중첩된 모듈이 모두 마이그레이션되면 루트 모듈을 마이그레이션하고 가짜 스토어를 실제 스토어로 교체하세요.
컴포넌트에서 Vuex 스토어를 Pinia 스토어로 교체하세요.