vue.js - Vue - API 调用是否属于 Vuex？

我正在努力寻找在 vue 模块中理想地放置 API 调用的位置的答案。我不是在 build SPA。例如，我的 auth 块有几个组件用于登录、密码重置、帐户验证等。每个块都使用 axios 进行 API 调用。 Axios 已经提供了异步的 promise。

问题是关于最佳实践。 API 调用是否属于 Vuex 操作？这种方法有什么优点/缺点吗？

将 axios 调用保留在它们所属的组件中是否有任何缺点？

最佳答案

我在服务中调用 API，而不是 Vuex 或组件。基本上，将 API 调用与商店代码混合在一起有点多方面的责任，组件应该为 View 提供而不是获取数据。

作为一个简单服务的例子(使用 Vue.http 但对于 Axios 调用也是如此)，

文件服务 .js

import Vue from 'vue'

export default {
  getFileList () {
    return Vue.http.get('filelist.txt')
      .then(response => {
        // massage the response here
        return filelist;
      })
      .catch(err => console.error('getFileList() failed', err) )
  },
}

我在下面的另一个服务中使用它(层数由你决定)。
请注意，外部服务正在检查存储以查看获取是否已经发生。

DataService.js

import FileService from './file.service'

checkFiles (page) {
  const files = store.state.pages.files[page]
  if (!files || !files.length) {
    return store.dispatch('waitForFetch', {
      resource: 'files/' + page,
      fetch: () => FileService.getFileList(),
    })
  } else {
    return Promise.resolve()  // eslint-disable-line no-undef
  }
},

waitForFetch 是调用传递给它的 fetch 函数的操作(由 FileService 提供)。它基本上为获取提供包装服务，例如超时和根据结果分派(dispatch)成功和失败操作。

该组件从不知道 API 结果(尽管它可能会启动它)，它只是等待数据出现在存储中。

至于只在组件中调用 API 的缺点，则取决于可测试性、应用程序复杂性。和团队规模。

可测试性 - 可以在单元测试中模拟服务。

应用程序复杂性 - 可以处理与 API 调用正交的超时/成功/失败。

团队规模 - 更大的团队，将任务分成更小的部分。

关于vue.js - Vue - API 调用是否属于 Vuex？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48494196/