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

Question

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

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

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

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

原文由 Jordy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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 模块 中维护产品相关数据，您可以从组件中的方法调度一个操作，该操作将在内部调用后端 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
}

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议