Quel est l'équivalent du service angulaire en VueJS?

il y a 4 façons:

• Apatrides service: ensuite, vous devez utiliser mixin
• Service Public: use Vuex
• service D'exportation et importation à partir d'un code vue
• tout objet global javascript

j'utilise axios comme client HTTP pour faire des appels api, j'ai créé un dossier gateways dans mon dossier src et j'ai mis des fichiers pour chaque backend, créant Axios instances , 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 component, vous pouvez avoir une fonction qui va récupérer des données à partir 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 de vue.js:

Mixins sont un moyen flexible de distribuer des fonctionnalités réutilisables pour les composants de Vue. Un objet mixin peut contenir n'importe quelle option composant. Lorsqu'un composant utilise un mixin, toutes les options dans le mixin sera "mixte" dans le composant propres options.

pour que vous puissiez ajouter un méthode mixin et il sera disponible dans toutes les composantes, 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')
  }
})

j'utilise surtout la ressource Vue.

1.Je crée un nouveau fichier où je me connecte à L'API endpoint en utilisant Vue.http.xxx .Donc disons que nous avons un paramètre qui produit les messages.Créer un nouveau répertoire dans votre projet, je l'appelle services , puis créer un 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'importer""

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 info sur cette approche, n'hésitez pas à vérifier ma pension sur GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app