서비스 클래스를 사용하는 고전적인 접근 방식보다 Pinia/Vuex가 선호되는 이유는 무엇입니까?

Question

파인애플/소

Pinia/Vuex 및 Redux는 어디에서나 얻을 수 있는 애플리케이션 데이터를 보관할 수 있는 하나 이상의 저장소를 가질 수 있는 "단일 소스"로 설계되었습니다.

피니아 매장은 다음과 같습니다:

으아아아

다음과 같이 사용할 수 있습니다:

으아아아

여러 매장을 만들 수 있습니다:

으아아아

상점은 서로 참조할 수 있습니다.

으아아아

마지막으로 Pinia/Vuex는 상태에 저장된 데이터를 검색하고 조작하는 기능을 제공하는 도구입니다.

매니저/서비스 클래스

하지만 또 다른 성숙한 접근 방식이 있습니다: 관리자/서비스 수업입니다.

이전 예는 다음과 같이 다시 작성할 수 있습니다.

으아아아

이 모든 것은 추가 래퍼 등이 필요 없이 TypeScript에 쉽게 입력할 수 있습니다. ref()

토론

내가 알 수 있듯이 Pinia는 "바퀴를 재발명"하는 것처럼 보입니다. 서투른 방식으로 동일한 기능을 작성하는 것입니다.

또한 종속성 주입을 제공하지 않습니다. 구성에서 저장소를 초기화하고 한 저장소를 다른 저장소에 정확하게 주입할 수 없으며 useProductsStore() 등을 전달해야 합니다.

상속이나 기타 OOP 항목도 불가능합니다.

Pinia는 순환 종속성을 촉진하여 유지 관리성이 떨어지는 스파게티 코드를 생성합니다.

결국 관리자 클래스를 사용하여 시도하고 테스트한 깔끔한 OOP 접근 방식보다 Pinia/Vuex를 선호해야 하는 이유는 무엇입니까? 나는 Pinia를 "다음 권장 Vue 상태 관리"로 사용하여 내 발명품의 튜토리얼 프로젝트를 작성하는 데 수십 시간을 보냈고 이제는 Pinia가 투박하고 풍부하다고 생각하기 때문에 모든 것을 관리자 클래스로 다시 작성하고 싶은 유혹을 받습니다. 나는 몇 년 전에 Vue2를 사용하여 또 다른 테스트 프로젝트를 작성하고 있었는데 그 당시 관리자 클래스를 사용했고 모든 것이 순조롭게 진행되었다는 것을 방금 기억했습니다. 내가 뭔가를 간과했나요? 피니아를 포기하면 문제가 생기나요?

Answer 1

수업은 Vue 반응성에서 2등급 시민이며 몇 가지 함정이 있습니다. 생성자에 바인딩할 수 없다는 사실 this，这将导致使用非反应式类实例反应式代理。他们无法有效地使用引用，因为这些引用是在记录但异常的方式。他们无法使用 get/set 访问器来计算引用。这些问题需要显式使用 Vue 反应性 API 以奇怪的方式编写类，或者以受限制的方式设计类，因此 reactive(new MyClass)이 올바르게 작동하는 데 방해가 되는 것은 아닙니다.

클래스에는 Vue 개발 도구, 플러그인 시스템 등에 대한 광범위한 지원과 같이 매장에 있는 기능이 없습니다.

클래스는 JavaScript에서도 직렬화할 수 없으므로 상태를 저장하고 복원하려면 스토리지 지속성 플러그인과 같은 간단한 JSON (역)직렬화가 아닌 사용자 지정 논리가 필요합니다.

종속성 주입은 클래스에만 국한되지 않고 적절한 방식으로 수행될 수 있습니다. 예를 들어 Pinia 매장에서는 다음과 같습니다.

으아아아

대부분의 경우 인스턴스를 저장하는 것보다 컴포저블을 저장하는 Pinia를 처리하는 것이 더 좋습니다. 이렇게 하면 컴포저블이 조기에 호출될 경우 문제가 될 수 있는 순환 종속성이 해결됩니다. 클래스에서도 동일한 문제가 발생할 수 있으며 클래스 인스턴스를 직접 사용하는 대신 DI 컨테이너를 사용해야 합니다.

재사용 가능한 코드는 OOP 대신 FP로 처리할 수 있으므로 상속은 문제가 되지 않습니다. Vue는 이를 명시적으로 홍보하지는 않지만 전자를 더 관용적이고 사용하기 편안하게 만듭니다.

TL;DR: Vue 반응형 디자인의 주요 사례이므로 일반 객체와 FP를 고수하세요.