时间戳

首页 > 解决方案 > Nuxt.js - API 调用的最佳场所

vue.js - 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，即创建用于获取数据并在需要的地方使用的服务层。

这是正确的方法吗？我在哪里可以找到一些可以从中汲取灵感的真实示例？

标签： vue.jsaxiosnuxt.jsvuex

解决方案

使用存储库模式来抽象您的 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 调用

推荐阅读