web-dev-qa-db-fra.com

Quel est l'équivalent de Angular Service dans VueJS?

Je veux mettre toutes mes fonctions qui parlent au serveur et vont chercher les données dans un seul fichier réutilisable dans VueJS.

Les plugins ne semblent pas être la meilleure alternative. Modèle moins de composants ..?

servicevue.jsvuejs2
76
Faizuddin Mohammed

Au total, il y a 4 façons:

  • Service sans état: alors vous devriez utiliser mixins
  • Service avec état: utilisez Vuex
  • Exporter le service et importer depuis un code vue
  • n'importe quel objet global javascript
47
Otabek Kholikov

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 backend, créant ainsi 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 va récupérer les données de l’API comme suit:

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

Comme je suppose que vous voulez réutiliser cette méthode dans plusieurs composants, vous pouvez utiliser mixins of vue.js:

Les mixins constituent un moyen flexible de distribuer des fonctionnalités réutilisables pour les composants Vue. Un objet mixin peut contenir n’importe quelle option de composant. Lorsqu'un composant utilise un mixin, toutes les options du mixin sont "mélangées" aux options du composant.

Vous pouvez donc ajouter une méthode dans mixin qui sera disponible dans tous les composants, là où mixin sera mélangé. Voir l'exemple suivant:

// define a mixin object
var myMixin = {
  methods: {
     getProducts () {
         myApi.get('products?id=' + prodId).then(response =>  this.product = response.data)
      }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

// alternate way to have a mixin while initialising
new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('other code')
  }
})
34
Saurabh

J'utilise principalement Vue Resource.

1.Je crée un nouveau fichier où je me connecte au point de terminaison de l'API à l'aide de Vue.http.xxx. Supposons donc que nous avons un point de terminaison qui affiche le message posts.Create dans votre projet, je l'appelle services, puis je crée fichier appelé PostsService.js - le contenu ressemble à ceci:

import Vue from 'vue'

export default {
  get() {
    return Vue.http.get('/api/posts)
  }
}

Ensuite, je vais au composant où je veux utiliser ce service et l'importe

import PostsService from '../services/PostsService'

export default {
  data() {
   return {
     items: []
   }
  },
  created() {
   this.fetchPosts()
  },
  methods: {
   fetchPosts() {
    return PostsService.get()
      .then(response => {
        this.items = response.data
      })
   }
  }
}

Pour plus d'informations sur cette approche, n'hésitez pas à consulter mon dépôt sur GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

29
Belmin Bedak

Je suggère de créer un fournisseur d'API auquel vous pouvez accéder de n'importe où dans votre application.

Créez simplement un dossier src/utils et un fichier nommé api.js.

Exportez votre wrapper qui sait comment communiquer avec votre API en tant qu’objet ou en tant que classe statique ES6 (je préfère son apparence et son fonctionnement si vous n’avez pas peur des classes). Ce fournisseur peut utiliser n’importe quelle bibliothèque de requêtes HTTP que vous aimez et vous pouvez facilement l’échanger ultérieurement en modifiant un seul fichier (celui-ci) au lieu de rechercher tout le code-base. Voici un exemple d'utilisation d'axios, en supposant que nous ayons une API REST disponible sur api.example.com/v1 qui utilise SSL:

import axios from 'axios'

import { isProduction, env } from '@/utils/env'

const http = null // not possible to create a private property in JavaScript, so we move it outside of the class, so that it's only accessible within this module

class APIProvider {
  constructor ({ url }) {
    http = axios.create({
      baseURL: url,
       headers: { 'Content-Type': 'application/json' }
    })
  }

  login (token) {
    http.defaults.headers.common.Authorization = `Bearer ${token}`
  }

  logout () {
    http.defaults.headers.common.Authorization = ''
  }

  // REST Methods
  find ({ resource, query }) {
    return http.get(resource, {
      params: query
    })
  }

  get ({ resource, id, query }) {
    return http.get(`${resource}/${id}`, {
      params: query
    })
  }

  create ({ resource, data, query }) {
    return http.post(resource, data, {
      params: query
    })
  }

  update ({ resource, id, data, query }) {
    return http.patch(`${resource}/${id}`, data, {
      params: query
    })
  }

  destroy ({ resource, id }) {
    return http.delete(`${resource}/${id}`)
  }
}

export default new APIProvider({
  url: env('API_URL')  // We assume 'https://api.example.com/v1' is set as the env variable
})

Ensuite, dans votre fichier main.js ou à tout autre endroit où vous bootstrap l'application Vue, procédez comme suit:

import api from '@/src/utils/api'

Vue.$api = api

Object.defineProperty(Vue.prototype, '$api', {
  get () {
    return api
  }
})

Vous pouvez maintenant y accéder n'importe où dans votre application Vue ainsi que n'importe où vous importez Vue lui-même:

<template>
  <div class="my-component">My Component</div
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      data: []
    }
  },
  async created () {
    const response = await this.$api.find({ resource: 'tasks', query: { page: 2 } })

    this.data = response.data
  }
}
</script>

ou:

// actions.js from Vuex
import Vue from 'vue'

export async function fetchTasks ({ commit }) {
  const response = await Vue.$api.find({ resource: 'tasks', query: { page: 2 } })

  commit('SAVE_TASKS', response.data)

  return response
}

J'espère que cela t'aides.

3
techiedod

Je pense que pour votre simple question, la réponse pourrait être n'importe quel module ES6 contenant des fonctions (équivalentes aux méthodes de la classe dans ANgular) et les importer directement dans des composants utilisant des importations et des exportations ES6. Aucun service de ce type ne pourrait être ajouté aux composants.

2
Sourabh Ranka

Vous pouvez créer votre propre service où vous pouvez placer tous vos appels de serveur HTTP, puis l'importer dans les composants où vous souhaitez les utiliser.

Le mieux est d'utiliser Vuex pour les applications de gestion d'état complexes, car vous êtes en mesure de gérer tous les appels asynchrones via des actions toujours exécutées de manière asynchrone, puis de valider la mutation une fois le résultat obtenu. La mutation interagit directement avec l'état et se met à jour. de manière immuable (ce qui est préférable). C'est une approche dynamique.

Il existe également d'autres approches. Mais ce sont ceux que je suis dans mon code.

0
Prateek Madaan