如何在Vue.js中构建api调用？-Java 学习之路

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

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

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

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

3 回答

我使用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
}

回复于 2024-04-30T06:33:44+08:00

注意：vue-resource已经退役！使用别的东西，比如Axios .

我主要使用Vue Resource . 我创建 services 目录，并将所有连接都放到 endpoints 上，例如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()
        })
    }  
  }
}

回复于 2024-04-30T06:33:44+08:00

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

回复于 2024-04-30T06:33:44+08:00

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

3 回答

已编辑

相关问题