如何在 Vue.js 中构造 api 调用？

Posted 2023-02-22

【中文标题】如何在 Vue.js 中构造 api 调用？

【英文标题】：How to structure api calls in Vue.js?

【发布时间】：2017-04-10 09:14:40

【问题描述】：

我目前正在开发一个新的 Vue.js 应用程序。它在很大程度上取决于对我的后端数据库的 api 调用。

对于很多事情，我使用 Vuex 存储，因为它管理我的组件之间的共享数据。在查看 github 上的其他 Vue 项目时，我看到一个特殊的 vuex 目录，其中包含处理所有操作、状态等的文件。因此，当一个组件必须调用 API 时，它会包含 vuex 目录中的操作文件。

但是，例如，对于消息，我不想使用 Vuex，因为这些数据只对一个特定的视图很重要。我想在这里使用组件特定的数据。但这是我的问题：我仍然需要查询我的 api。但我不应该包含 Vuex 操作文件。所以这样我应该创建一个新的动作文件。这样我就有了一个特定的文件，其中包含针对 vuex 和单个组件的 api 操作。

我应该如何构建它？创建一个新目录“api”来处理 vuex 数据和组件特定数据的操作？还是分开？

【问题讨论】：

只需将调用放在组件内部而不将结果存储在vuex中，因为它仅适用于该组件？

是的，但是如何构建我的文件？我应该创建两个不同的动作文件吗？一个用于 vuex，一个用于组件特定？还是合并它们？

【参考方案1】：

我使用 axios 作为 HTTP 客户端进行 api 调用，我在我的 src 文件夹中创建了一个 gateways 文件夹，我已经为每个后端放置了文件，创建 axios instances，如下所示

myApi.js

import axios from 'axios'
export default axios.create(
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: 
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
    'Content-Type': 'application/json'
  
)

现在在您的组件中，您可以拥有一个从 api 获取数据的函数，如下所示：

methods: 
 getProducts () 
     myApi.get('products?id=' + prodId).then(response =>  this.product = response.data)
  

同样，您也可以使用它来获取您的 vuex 存储的数据。

已编辑

如果您在专用vuex module 中维护产品相关数据， 您可以从组件中的方法调度一个操作，该操作将在内部调用后端 API 并在存储中填充数据，代码如下所示：

组件中的代码：

methods: 
 getProducts (prodId) 
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  

vuex 商店中的代码：

import myApi from '../../gateways/my-api'
const state = 
  products: []


const actions = 
  FETCH_PRODUCTS: (state, prodId) => 
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  
 

// mutations
const mutations = 
  SET_PRODUCTS: (state, data) => 
    state.products = Object.assign(, response.data)
  


const getters = 


export default 
  state,
  mutations,
  actions,
  getters

【讨论】：

关于 Vuex 的操作保存在哪里？例如向 Vuex 添加新数据？ Vuex 文件夹中是否有 actions.js。还是在每个组件内部都这样做？

Vuex 相关代码是单独的，你可以选择如何安排它，一种方式可以在cart example 中这样，我没有专门的动作文件，我有不同的 vuex 模块和他们的动作，突变等在一个文件中。

那么在组件的getProducts() 中调用一个动作来更新Vuex 存储？

@Jordy 是的，如果我在productStore 中维护数据，那么我可以在这里触发mutation，或者我可以从getProducts() 触发dispatch 和action，这将调用后端API并触发突变。

@Saurabh 谢谢你的回答！您在 Vuex 存储中保留过时数据多长时间？您何时决定从服务器检索当前数据？

【参考方案2】：

基于 Belmin Bedak 的回答概念，我将其全部包装到一个简单的库中：

https://github.com/robsontenorio/vue-api-query

您可以这样请求您的 API：

所有结果

// GET /posts?filter[status]=ACTIVE

let post = await Post
  .where('status', 'ACTIVE')
  .get()

具体结果

// GET /posts/1

let post = await Post.find(1)

编辑

// PUT /posts/1 

post.title = 'Awsome!'
post.save()

关系

// GET /users/1
let user = await User.find(1)

// GET users/1/posts
let posts = await user
  .posts()
  .get()

【参考方案3】：

注意：vue-resource 已退役！使用其他东西，例如 Axios。

我主要使用 Vue 资源。我创建 services 目录，并将所有连接放置到端点，例如 PostService.js

import Vue from 'vue'

export default 
  get(id) 
    return Vue.http.get(`/api/post/$id`)
  ,
  create() 
    return Vue.http.post('/api/posts') 
  
  // etc

然后在我的文件中导入该服务并创建从服务文件调用方法的方法

SomeView.vue

import PostService from '../services/PostService'

export default 
  data() 
    item: []
  ,
  created() 
    this.fetchItem()
  ,
  methods: 
    fetchItem() 
      return PostService.get(to.params.id)
        .then(result => 
          this.item = result.json()
        )
      
  

【讨论】：

太好了，谢谢。你在哪里存储与 Vuex 相关的所有操作？比如你在哪里存储用户信息？

@Jordy 抱歉，我还没有在我的项目中使用 Vuex。

@Jordy 我将所有操作、getter、突变、插件和状态存储在 /src 内的存储文件夹中