Vue.js SPA 项目结构——在哪里使用 Vuex 存储和调用 API答案

【问题标题】：Vue.js SPA project structure - where to use Vuex store and call APIsVue.js SPA 项目结构——在哪里使用 Vuex 存储和调用 API
【发布时间】：2020-06-12 11:38:17
【问题描述】：

我的 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 是一种好习惯吗？然后通过 props 将所有必要的数据从他们那里传递给孩子们？

或者我是否也应该在其他组件中使用商店和 API，例如在 AppList.vue（这是跨多个页面使用的通用组件）中。

【问题讨论】：

我两者都用 - 但我想知道这个问题是否有真正的答案或只是意见？我使用 vuex 模块作为 mixin 并根据需要将它们添加到组件中 - 所以基本上可以构建一个 prop mixin 和一个 vuex mixin 并扩展核心骨架以适应最可修复/可审查的模式 - imo

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

Vuex 的目的之一是解耦不相关的组件，因此它打算直接从任何应该访问超出父级范围的全局数据的组件中使用。这一点的一些证据是存在诸如mapState 之类的辅助方法，否则这些方法将毫无用处。对于与父级紧密相关的组件，通常使用 props 更有意义。

通常也有将 API 导入 Vuex 的用途，这没关系。

Vuex 适用于：

由多个组件共享的数据
集中式 API（以便您可以从多个组件访问它）

Vuex 不适合：

如果道具更简单并且可以轻松完成工作，则可能没有理由使用 Vuex。
无需考虑持久数据的情况

来自docs

如果您正在构建一个中型到大型的 SPA，您可能会遇到让您考虑如何更好地处理 Vue 组件之外的状态的情况，而 Vuex 将是您自然的下一步.

【讨论】：