동일한 API 함수를 호출하는 두 개의 vue 구성 요소

동일한 API 함수를 호출하는 두 개의 vue 구성 요소

같은 부모 컴포넌트에 컴포넌트의 인스턴스가 2개 있고 이 자식 컴포넌트는 생성된 라이프 사이클훅에서 API 호출을 실행하여 드롭다운목록을 채웁니다.목록 데이터는 자녀의 두 인스턴스에서 동일합니다.

그 결과 부모 컴포넌트가 로드되면 실제로는 API를 두 번 호출하게 됩니다.이것은 불필요합니다.

문제는 API 호출을 부모에게 이동시키고 드롭다운목록 항목을 자녀에게 전달하거나 vuex를 사용하여 부모에게 API 호출 액션을 호출해야 하는지 여부입니다.그러면 항목이 상태에 저장되고 하위 구성요소가 스토어 게터를 통해 항목에 액세스합니다.

목록이 적고 현재 부모 이외의 다른 곳에서 필요할 수 있기 때문에 vuex 저장소를 사용하고 싶습니다.

TLDR;

• 부모->자녀관계외에서사용하는경우Vuex를사용합니다.

• 심플하고 작은 것을 알고 있으면, 소품으로 건네주는 것만으로, 점포의 셋업의 복잡함을 경감할 수 있습니다.

• 다른 옵션은 localStorage에 저장하는 것이지만 캐시를 지우는 사용자가 드롭다운 기능을 잃게 되므로 신뢰성이 떨어질 수 있습니다.

Vuex 스토어에 저장하여 애플리케이션 내 임의의 장소에 저장하여 목록을 가져오고 드롭다운 목록을 자식에게 전달해야 하는 경우 자식에서 Prop를 생성하고 드롭다운 목록을 전달할 수도 있습니다.

Children은 드롭다운 항목에 액세스할 수 있으며, 작은 앱에서 간단한 드롭다운을 위해 Vuex의 복잡성을 추가할 필요가 없습니다.

리스트가 그다지 크지 않다고 말씀하셨습니다.드롭다운이 사용자가 매번 클릭하거나 사용할 필요가 없는 것이 아니라면 2개의 API 호출로 하는 것이 반드시 나쁜 것은 아닙니다.그 시점에서 드롭 다운에 액세스 하려고 하면, 데이터를 로드하는 것만으로, 경우에 따라서는 드롭 다운 리스트를 요구하기 위한 대역폭을 절약할 수 있습니다.

동일한 데이터를 여러 구성 요소에 렌더링해야 하는 경우 Vuex 저장소를 선택해야 합니다.Vuex 스토어는 초기 셋업 수준에서는 코드 복잡성을 증가시키지만 이후 API 데이터를 여러 컴포넌트에 사용하는 것은 매우 간단하고 간단합니다.각 애플리케이션에서 Vuex 스토어를 사용하는 것은 아닙니다.본래 진보적인 애플리케이션을 개발하고 있으며 앞으로 더 복잡해질 경우 Vuex 스토어를 사용하십시오.앞으로의 발전에 도움이 될 것입니다.Vuex 스토어 상세내용은 다음과 같습니다.

언급URL : https://stackoverflow.com/questions/57997969/two-vue-components-calling-same-api-function