Nuxt.js - API 调用的最佳场所

我是 Vue.js Nuxt 和所有前端东西的新手。

我有一个关于 API 调用的问题。我不确定什么是正确的方法，这里的最佳实践是什么。

我有一家商店。在该商店中，我有调用我的 API 并设置状态的操作，例如。

async fetchArticle({ state, commit }, uuid) {
    const response = await this.$axios.get(`articles/${uuid}/`)
    commit('SET_ARTICLE', response.data)
},

这很好，它适用于一个组件。

但是如果我只想获取文章而不更改状态怎么办？

为了保持 DRY，我首先想到的是创建用于获取数据并在需要的地方使用的服务层。

这是正确的方法吗？我在哪里可以找到一些可以从中获得灵感的现实例子？

使用存储库模式来抽象 API 绝对是个好主意！无论您使用@nuxtjs/axios模块或@nuxt/http模块中，您可以将任一实例传递给存储库类/函数。下面是抽象的“repository.js”文件的真实示例。

export default $axios => resource => ({
  index() {
    return $axios.$get(`/${resource}`)
  },

  create(payload) {
    return $axios.$post(`/${resource}`, payload)
  },

  show(id) {
    return $axios.$get(`/${resource}/${id}`)
  },


  update(payload, id) {
    return $axios.$put(`/${resource}/${id}`, payload)
  },

  delete(id) {
    return $axios.$delete(`/${resource}/${id}`)
  }

})

然后，您可以创建一个插件来初始化端点的所有不同类型的存储库：

import createRepository from '~/path/to/repository.js'

export default (ctx, inject) => {
  const repositoryWithAxios = createRepository(ctx.$axios)

  const repositories = {
    posts: repositoryWithAxios('posts'),
    users: repositoryWithAxios('users')
    //...
  }

  inject('repositories', repositories)
}

进一步阅读：在 Nuxt.js 中组织和解耦 API 调用 https://blog.lichter.io/posts/nuxt-api-call-organization-and-decoupling/