如何在Vue.js中构建API调用结构？

Question

如何在Vue.js中构建API调用结构？

43

我目前正在开发一个新的Vue.js应用程序，它在很大程度上依赖于与后端数据库的API调用。

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

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

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

- Jordy

简单来说，将调用放在组件内部，而不是将结果存储在vuex中，因为它仅适用于此组件？ - JJPandari

1

是的，但是如何组织我的文件呢？我应该创建两个不同的 actions 文件吗？一个用于 Vuex，一个用于组件特定？还是将它们合并在一起？ - Jordy

3个回答

6

注意：vue-resource 已经停用！请使用其他工具，如 Axios。

我主要使用 Vue Resource。我创建了一个名为“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
}

然后在我的文件中，我导入了该服务并创建了一个方法，该方法将调用服务文件中的方法。 < p > < em > SomeView.vue < /em > < /p>

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()
        })
    }  
  }
}

- Belmin Bedak

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

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

@Jordy 我将所有的 actions、getters、mutations、plugin 和 state 存储在 /src 中的一个名为 store 的文件夹内。 - felipekm

5

根据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()

- Robson Tenório

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Saurabh · Accepted Answer

我正在使用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 模块来管理产品相关的数据，你可以从组件的方法中分发一个 action，它将在内部调用后端 API 并在 store 中填充数据，代码将类似于以下内容：

组件中的代码：

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

在 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
}