如何在 Vue.js 中构建 api 调用? [英] How to structure api calls in Vue.js?

问题描述

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

I'm currently working on a new Vue.js application. It depends heavily on api calls to my backend database.

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

For a lot of things I use Vuex stores because it manages shared data between my components. When looking at other Vue projects on github I see a special vuex directory with files that handles all the actions, states and so on. So when a component has to call the API, it includes the actions file from the vuex directory.

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

But, for messages for example, I don't want to use Vuex because those data is only important for one specific view. I want to use the component specific data here. But here is my problem: I still need to query my api. But I shouldn't include the Vuex actions file. So in that way I should create a new actions file. This way I have a specific file with api actions for vuex and for single components.

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

How should I structure this? Creating a new directory 'api' that handles actions for both vuex data and component-specific data? Or separate it?

推荐答案

我正在使用 axios作为进行 api 调用的 HTTP 客户端，我在 src 文件夹中创建了一个 gateways 文件夹，并为每个后端放置了文件，创建了 axios 实例，如下图

I am using axios as HTTP client for making api calls, I have created a gateways folder in my src folder and I have put files for each backend, creating axios instances, like following

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 获取数据的函数，如下所示:

Now in your component, You can have a function which will fetch data from the api like following:

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

同样，您也可以使用它来获取 vuex 商店的数据.

Similarly you can use this to get data for your vuex store as well.

如果您在专用的 vuex 模块中维护产品相关数据，您可以从组件中的方法中分派一个操作，该操作将在内部调用后端 API 并在商店中填充数据，代码如下所示:

If you are maintaining product related data in a dedicate vuex module, you can dispatch an action from the method in component, which will internally call the backend API and populate data in the store, code will look something like following:

组件中的代码:

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

vuex store 中的代码:

Code in vuex store:

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
}

这篇关于如何在 Vue.js 中构建 api 调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！