web-dev-qa-db-fra.com

Comment structurer les appels api dans Vue.js?

Je travaille actuellement sur une nouvelle application Vue.js. Cela dépend énormément des appels api vers ma base de données backend.

J'utilise beaucoup de magasins Vuex car ils gèrent les données partagées entre mes composants. Lorsque je regarde d’autres Vue sur github, je vois un répertoire spécial vuex contenant des fichiers qui gère toutes les actions, tous les états, etc.). Ainsi, lorsqu’un composant doit appeler l’API, il inclut les actions fichier du répertoire vuex.

Mais, pour les messages par exemple, je ne souhaite pas utiliser Vuex car ces données ne sont importantes que pour une vue spécifique. Je veux utiliser les données spécifiques aux composants ici. Mais voici mon problème: je dois encore interroger mon API. Mais je ne devrais pas inclure le fichier d’actions Vuex. Donc, de cette façon, je devrais créer un nouveau fichier d'actions. De cette façon, j'ai un fichier spécifique avec les actions api pour vuex et pour les composants simples.

Comment dois-je structurer cela? Créer un nouveau répertoire 'api' qui gère les actions à la fois pour les données Vuex et les données spécifiques aux composants? Ou le séparer?

apistructurevue.jsvuex
32
Jordy

J'utilise axios en tant que client HTTP pour passer des appels api. J'ai créé un dossier gateways dans mon dossier src et j'ai mis des fichiers pour chaque serveur, créant - instances axios , comme suit

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

Maintenant, dans votre composant, vous pouvez avoir une fonction qui récupérera les données de l’API comme suit:

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

De même, vous pouvez utiliser ceci pour obtenir des données pour votre magasin Vuex.

Édité

Si vous conservez des données relatives au produit dans un dédicace module vuex , vous pouvez envoyer une action à partir de la méthode du composant, qui appellera en interne l'API dorsale et renseignera les données dans le magasin. Le code ressemblera à ceci: Suivant:

Code dans le composant:

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

Code dans le magasin 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
}
26
Saurabh

Remarque: vue-resource est retiré! Utilisez autre chose, comme Axios.

J'utilise principalement le répertoire Vue Resource.I. Crée services et met toutes les connexions aux noeuds finaux, par exemple, 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
}

Ensuite, dans mon fichier, j'importe ce service et crée une méthode qui appelle la méthode à partir du fichier de service

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()
        })
    }  
  }
}
4
Belmin Bedak

Basé sur le concept de la réponse de Belmin Bedak, j’ai tout intégré dans une simple bibliothèque:

https://github.com/robsontenorio/vue-api-query

Vous pouvez demander votre API comme ceci:

Tous les résultats

// GET /posts?filter[status]=ACTIVE

let post = await Post
  .where('status', 'ACTIVE')
  .get()

Résultat spécifique

// GET /posts/1

let post = await Post.find(1)

Édition

// PUT /posts/1 

post.title = 'Awsome!'
post.save()

Des relations

// GET /users/1
let user = await User.find(1)

// GET users/1/posts
let posts = await user
  .posts()
  .get()
3
Robson Tenório