Vue - API 调用属于 Vuex 吗?
Vue - Do API calls belong in Vuex?
我正在努力寻找在 vue 模块中理想地放置 API 调用的答案。我不是在构建 SPA。例如,我的 auth 块有几个组件用于登录、密码重置、帐户验证等。每个块都使用 axios 进行 API 调用。 Axios 已经提供了异步的承诺。
问题是关于最佳实践的。 API 调用是否属于 Vuex 操作?有没有pros/cons这样的做法?
将 axios 调用保留在它们所属的组件中有什么缺点吗?
我在服务中调用 API,而不是 Vuex 或组件。基本上,将 API 调用与商店代码混合在一起有点过于多重责任,组件应该提供视图而不是获取数据。
作为简单服务的示例(使用 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
是调用传递给它的提取函数的操作(由 FileService 提供)。它基本上为获取提供包装器服务,例如超时以及根据结果分派成功和失败操作。
该组件永远不知道 API 结果(尽管它可能会启动它),它只是等待数据出现在商店中。
至于只在组件中调用 API 的缺点,这取决于可测试性、应用程序复杂性。和团队规模。
- 可测试性 - 可以在单元测试中模拟服务。
- 应用程序复杂性 - 可以与 API 调用正交地处理超时/成功/失败。
- 团队规模 - 更大的团队,将任务分成更小的部分。
我正在努力寻找在 vue 模块中理想地放置 API 调用的答案。我不是在构建 SPA。例如,我的 auth 块有几个组件用于登录、密码重置、帐户验证等。每个块都使用 axios 进行 API 调用。 Axios 已经提供了异步的承诺。
问题是关于最佳实践的。 API 调用是否属于 Vuex 操作?有没有pros/cons这样的做法?
将 axios 调用保留在它们所属的组件中有什么缺点吗?
我在服务中调用 API,而不是 Vuex 或组件。基本上,将 API 调用与商店代码混合在一起有点过于多重责任,组件应该提供视图而不是获取数据。
作为简单服务的示例(使用 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
是调用传递给它的提取函数的操作(由 FileService 提供)。它基本上为获取提供包装器服务,例如超时以及根据结果分派成功和失败操作。
该组件永远不知道 API 结果(尽管它可能会启动它),它只是等待数据出现在商店中。
至于只在组件中调用 API 的缺点,这取决于可测试性、应用程序复杂性。和团队规模。
- 可测试性 - 可以在单元测试中模拟服务。
- 应用程序复杂性 - 可以与 API 调用正交地处理超时/成功/失败。
- 团队规模 - 更大的团队,将任务分成更小的部分。