如何在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文件夹，并为每个后端放置了文件，从而创建了

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存储中的代码:

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屋！