Pinia

Vue 애플리케이션의 클라이언트 측 상태 관리 도구인 Pinia의 모범 사례, 테스트 방법, Vuex 마이그레이션 절차를 설명합니다.

Pinia 는 Vue 애플리케이션의 클라이언트 측 상태 관리 를 위한 도구입니다. Pinia 사용 방법은 공식 문서 를 참조하세요. 모범 사례 # Pinia 인스턴스 # 항상 ~/pinia/instance 에서 공유 Pinia 인스턴스를 사용하는 것이 좋습니다. 이렇게 하면 여러 Pinia 인스턴스에 대해 걱정하지 않고 컴포넌트에 더 많은 스토어를 쉽게 추가할 수 있습니다. import { pinia } from '~/pinia/instance'; new Vue({ pinia, render(h) { return h(MyComponent); } }); 소규모 스토어 # 단일 작업에만 집중하는 소규모 스토어를 생성하는 것이 좋습니다. 이는 더 큰 스토어 생성을 권장하는 Vuex 방식과 반대됩니다. Pinia 스토어는 거대한 상태 파사드(Vuex 모듈)가 아닌 응집력 있는 컴포넌트처럼 취급하세요. Vuex 설계 ❌ # 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] 단일 파일 스토어 # 상태(state), 액션(action), 게터(getter)를 단일 파일에 배치하세요. actions.js , state.js , getters.js 에서 모든 것을 임포트하는 '배럴(barrel)' 스토어 인덱스 파일을 생성하지 마세요. 스토어 파일이 너무 커지면 해당 스토어를 여러 스토어로 분리하는 것을 고려할 때입니다. Option 스토어 사용 # Pinia는 두 가지 유형의 스토어 정의를 제공합니다: option 과 setup . 새 스토어를 생성할 때는 option 타입을 선호하세요. 이를 통해 일관성을 높이고 Vuex에서의 마이그레이션 경로를 단순화할 수 있습니다. 전역 스토어 # 전역 반응형 상태에는 전역 Pinia 스토어를 사용하는 것이 좋습니다. // bad ❌ import { isNarrowScreenMediaQuery } from '~/lib/utils/css_utils'; new Vue({ data() { return { isNarrow: false, }; }, mounted() { const query = isNarrowScreenMediaQuery(); this.isNarrow = query.matches; query.addEventListener('chang