Vuex에서 마이그레이션하기

기존 Vuex 스토어를 순수 Vue와 Apollo Client로 마이그레이션하는 방법과 단계별 전략을 설명합니다.

GitLab에서 Vuex는 더 이상 사용되지 않습니다 . 기존 Vuex 스토어가 있다면 마이그레이션을 강력히 권장합니다. 왜 마이그레이션해야 하나요? # GraphQL API 를 모든 사용자 대면 기능의 주요 선택지로 정의했습니다. GraphQL이 있는 곳에는 Apollo Client도 함께 있다고 안전하게 가정할 수 있습니다. Vuex와 Apollo를 함께 사용하는 것을 원하지 않으므로 , REST API에서 GraphQL로 이동함에 따라 Vuex 스토어 수는 시간이 지남에 따라 자연스럽게 줄어들 것입니다. 이 섹션은 기존 Vuex 스토어를 순수 Vue와 Apollo로 변환하거나, Vuex 의존도를 줄이는 방법에 대한 가이드라인과 방법을 제공합니다. 어떻게 마이그레이션하나요? # 마이그레이션을 진행하기 전에 선호하는 상태 관리 솔루션을 선택하세요 . Pinia를 사용할 계획이라면 이 가이드를 따르세요 . 모든 상태 관리에 Apollo Client를 사용할 계획이라면 아래 가이드를 따르세요 . Vue 관리 상태와 Apollo Client로 마이그레이션하기 # 전체적으로, 변경 사항이 얼마나 복잡한지 파악해야 합니다. 경우에 따라 전역 상태에 저장할 가치가 있는 속성이 몇 개에 불과한 경우도 있고, 때로는 모두 순수 Vue 로 안전하게 추출할 수 있는 경우도 있습니다. VueX 속성은 일반적으로 다음 카테고리 중 하나에 속합니다: 정적 속성 반응형 가변 속성 Getter API 데이터 따라서, 첫 번째 단계는 현재 VueX 상태를 읽고 각 속성의 카테고리를 결정하는 것입니다. 높은 수준에서, 각 카테고리를 동등한 비-VueX 코드 패턴으로 매핑할 수 있습니다: 정적 속성: Vue API의 Provide/Inject. 반응형 가변 속성: Vue 이벤트와 props, Apollo Client. Getter: 유틸리티 함수, Apollo update 훅, computed 속성. API 데이터: Apollo Client. 예제를 통해 살펴보겠습니다. 각 섹션에서 이 상태를 참조하며 전체 마이그레이션을 단계적으로 진행합니다: // state.js AKA our store export default ({ blobPath = '', summaryEndpoint = '', suiteEndpoint = '' }) => ({ blobPath, summaryEndpoint, suiteEndpoint, testReports: {}, selectedSuiteIndex: null, isLoading: false, errorMessage: null, limit : 10, pageInfo: { page: 1, perPage: 20, }, }); 정적 값 마이그레이션 방법 # 마이그레이션하기 가장 쉬운 값 유형은 정적 값으로, 다음 두 가지 중 하나입니다: 클라이언트 측 상수: 정적 값이 클라이언트 측 상수라면, 다른 상태 속성이나 메서드에서 쉽게 접근하기 위해 스토어에 구현되었을 수 있습니다. 그러나 일반적으로는 이러한 값을 constants.js 파일에 추가하고 필