Vue. js Структура проекта SPA - где использовать Vuex store и вызывать API

Question

В моем приложении 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 и вызывать API только из индекса. vue файл страниц ? А затем передать все необходимые данные детям от них через реквизиты?

Или я должен использовать хранилище и API-интерфейсы и в других компонентах, например в AppList. vue (который является распространенным компонентом, используемым в несколько страниц).

Answer 1

Одной из целей Vuex является разделение несвязанных компонентов, поэтому он предназначен для использования непосредственно с любым компонентом, который должен получать доступ к глобальным данным, выходящим за рамки родительского. Некоторым доказательством этого является существование вспомогательных методов, таких как mapState, которые в противном случае не имели бы цели. Для компонентов, тесно связанных с родительским, часто вместо этого имеет смысл использовать реквизиты.

Часто также используется для импорта API в Vuex, и это нормально.

Vuex хорош для:

• данных, которые совместно используются несколькими компонентами
• Централизованным API (чтобы вы могли получить к нему доступ из нескольких компонентов)

Vuex не так хорош для:

• Если реквизиты проще и работа выполняется легко, возможно, нет смысла использовать Vuex.
• Ситуации, когда постоянные данные не являются проблемой

Из документов

, если вы строите SPA среднего и крупного масштаба, есть вероятность, что вы столкнулись с ситуациями, которые делают вы думаете о том, как лучше обрабатывать состояние вне ваших Vue компонентов, и Vuex станет для вас естественным следующим шагом.