Vue.js SPA 프로젝트 구조 - Vuex 스토어 및 호출 API 사용처

Vue.js SPA 프로젝트 구조 - Vuex 스토어 및 호출 API 사용처

내 Vue 앱에는 다음과 같은 프로젝트 구조가 있습니다.

components/
    article/
        AppList.vue
    common/
        AppObserver.vue
        NoSSR.vue
    layout/
        AppFooter.vue
        AppHeader.vue                
    ui/
        AppButton.vue
        AppList.vue
pages/
    ArticlePage/
        index.vue
        ArticleTitle.vue
        LastArticlesSection.vue
    UserPage.vue
        ....

Vuex 스토어를 사용하여 페이지의 index.vue 파일에서만 API를 호출하는 것이 좋은 방법입니까?그리고 아이들에게 필요한 모든 데이터를 소품을 통해 전달해 주는 거죠?

또는 AppList.vue(여러 페이지에 걸쳐 사용되는 공통 컴포넌트) 등 다른 컴포넌트에서도 스토어와 API를 사용해야 합니까?

Vuex의 목적 중 하나는 관련이 없는 컴포넌트를 분리하는 것입니다.따라서 상위 컴포넌트의 범위를 벗어나는 글로벌 데이터에 액세스해야 하는 컴포넌트에서 직접 사용할 수 있습니다.그 증거로는 다음과 같은 도우미 방법이 있습니다.mapState그렇지 않으면 아무 목적도 없을 겁니다모기업과 밀접한 관계가 있는 컴포넌트의 경우 소품을 사용하는 것이 더 합리적인 경우가 많습니다.

API를 Vuex로 Import할 때도 자주 사용되는데, 이 경우에도 괜찮습니다.

Vuex의 장점:

• 여러 구성 요소가 공유하는 데이터
• 집중형 API(여러 컴포넌트에서 액세스 가능)

Vuex의 장점:

• 소품들이 더 단순하고 작업을 쉽게 할 수 있다면 Vuex를 사용할 이유가 없을 수도 있습니다.
• 영속적인 데이터가 문제가 되지 않는 경우

문서에서

중대규모 SPA를 구축하고 있는 경우 Vue 컴포넌트 이외의 상태를 보다 효과적으로 처리할 수 있는 방법을 고민하게 될 가능성이 있습니다.Vuex는 자연스러운 다음 단계입니다.

언급URL : https://stackoverflow.com/questions/60450488/vue-js-spa-project-structure-where-to-use-vuex-store-and-call-apis