Pinia의 상속/공유 작업 및 게터

Question

작업 및 getter 집합을 공유해야 하는 Pinia 매장이 여러 개 있지만 이를 효율적으로 달성하는 방법을 잘 모르겠습니다.

저는 사용자가 다양한 미디어(책, 영화, TV 프로그램 등)를 관리할 수 있는 애플리케이션을 구축 중입니다. 현재 생각하고 있는 방식은 BookStore, MovieStore 등 미디어 유형별로 스토어를 두는 것입니다. 많은 getter 및 작업(예: count 和 deleteOne)은 서로 다른 상점 간에 정확히 동일합니다.

여기서 DRY를 어떻게 구현하나요? Pinia 문서의 예제는 다른 저장소 내에서 액션과 게터를 재사용하는 데 중점을 두고 있지만 이것이 게터와 세터 세트를 직접 상속하는 사용 사례를 완전히 다루지는 않습니다.

내가 여기서 시도하는 상속 접근 방식은 안티 패턴인가요?

Answer 1

일부 기능을 모든 매장에서 공유하지 않으려면 컴포저블을 사용할 수 있습니다.

별도의 구성 가능한 함수를 만들고 여기에 스토어 인스턴스의 일부를 전달할 수 있습니다.

나는 codesandbox에서 여러분을 위해 예제를 만들었습니다.

다음은 코드샌드박스의 간단한 예입니다:

common.ts

으아악

그러면 어느 매장에서나 다음과 같이 사용할 수 있습니다.

fooStore.ts

으아악

이 방법을 사용하면 모든 저장소나 구성 요소에서 기능, 개체 등을 구성할 수 있습니다.

Answer 2

이것은 플러그인을 사용하여 달성할 수 있습니다 docs

샘플 동영상:

공유된 명명 체계를 사용하는 각 주마다 여러 매장이 있습니다.

• 아이템: 단일 엔터티 아이템(단일 영화 세부정보)
• 컬렉션: 프로젝트 컬렉션(모든 영화 모음)

각 매장은 동일한 CRUD 작업을 수행하며 URL만 변경됩니다

• getCollection: API에서 항목 목록을 가져오고 컬렉션에 대한 응답을 설정합니다(https://url.com/movies a>)
• getItem: API에서 단일 항목을 가져오고 해당 항목에 대한 응답을 설정합니다(https://url.com/movies/id)
• handleError: 사용자에게 오류 메시지와 함께 경고 표시

플러그인 만들기:

으아악

Pinia용 플러그인 제공:

으아악

예제 movieStore.js(공유 작업 및 상태 사용)

으아악

구성 요소의 사용 예

으아악

편집자: 1

컨텍스트를 플러그인에 전달하면 매장과 여기에 전달된 옵션에 액세스할 수 있으며, 여기서 매장 ID를 확인하고 아래와 같이 특정 매장만 반환할 수 있습니다.

으아악

저는 3개의 스토어를 사용하여 아주 기본적인 예를 만들었습니다. 위의 확인은 코드샌드박스 여기

에서 확인할 수 있습니다.