Pinia

경고:

파일럿 단계: Pinia를 신중하게 채택하세요.

이것은 GitLab의 새로운 기술이며, 아직 모든 필요한 예방 조치와 모범 사례가 준비되어 있지 않을 수 있습니다.

Pinia를 사용하려고 고려하고 있다면 평가를 위해 #frontend 내부 Slack 채널에 메시지를 남겨주세요.

Pinia는 Vue 애플리케이션의 클라이언트 측 상태 관리 도구입니다.

Pinia 사용 방법에 대한 공식 문서를 참조하세요.

모범 사례

소형 스토어

단일 작업에만 집중하는 소형 스토어를 만드는 것을 선호하세요.

이는 더 큰 스토어를 생성하도록 권장하는 Vuex 접근 방식과 반대입니다.

Pinia 스토어는 거대한 상태 외관(Vuex 모듈)보다 응집력 있는 구성 요소로 다루세요.

단일 파일 스토어

상태, 액션 및 게터를 단일 파일에 두세요.

actions.js, state.js 및 getters.js에서 모든 것을 가져오는 ‘배럴’ 스토어 인덱스 파일을 생성하지 마세요.

스토어 파일이 너무 커지면 해당 스토어를 여러 개의 소형 스토어로 나누는 것을 고려할 때입니다.

옵션 스토어 사용

Pinia는 옵션 및 설정 두 가지 유형의 스토어 정의를 제공합니다.

새로운 스토어를 만들 때 옵션 유형을 선호하세요. 이는 일관성을 촉진하고 Vuex에서의 마이그레이션 경로를 단순화합니다.

Pinia 이전

flowchart TD A[Store] A --> B[State] A --> C[Actions] A --> D[Mutations] A --> E[Getters] B --> F[items] B --> G[isLoadingItems] B --> H[itemWithActiveForm] B --> I[isSubmittingForm]

Pinia 이후

flowchart TD A[Items Store] A --> B[State] A --> C[Actions] A --> D[Getters] B --> E[items] B --> F[isLoading] H[Form Store] H --> I[State] H --> J[Actions] H --> K[Getters] I --> L[activeItem] I --> M[isSubmitting]

Vuex에서 마이그레이션

먼저 기본 상태 관리자가 무엇이어야 할지를 결정하세요.

Pinia가 귀하의 선택이었다면 이 가이드를 진행하세요.

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

모든 마이그레이션을 두 단계로 나누는 것을 시도하세요:

  1. Vuex API 리팩터링: 스토어 구조를 변경하지 말고 Pinia에서 작동하는지 확인하세요 (예시).
  2. 구조 리팩터링: 스토어를 여러 개의 소형, 단일 목적 스토어로 나누세요.

중첩 모듈이 있는 스토어 마이그레이션

종속성이 있는 중첩 모듈이 있는 스토어를 점진적으로 마이그레이션하는 것은 간단하지 않습니다.

이런 경우 중첩 모듈을 먼저 마이그레이션하는 것을 선호하세요:

  1. 중첩 Vuex 스토어 모듈의 Pinia 스토어에 해당하는 스토어를 생성하세요.
  2. 해당하는 경우 루트 모듈 종속성을 위한 자리 표시자 Pinia ‘루트’ 스토어를 생성하세요.
  3. 마이그레이션된 모듈을 위해 기존 테스트를 복사하고 적응하세요.
  4. 마이그레이션된 모듈을 아직 사용하지 마세요.
  5. 모든 중첩 모듈이 마이그레이션되면 루트 모듈을 마이그레이션하고 자리 표시자 스토어를 실제 스토어로 교체하세요.
  6. 구성 요소에서 Vuex 스토어를 Pinia 스토어로 교체하세요.