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

Question

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 ..?

Answer 1

Il y a 4 façons:

• Service sans état: alors vous devriez utiliser mixins
• Service Statefull: utilisez Vuex
• Exporter le service et importer depuis un code de vue
• tout objet global javascript

Answer 2

Je suis à l'aide d'axios en tant que client HTTP pour faire des appels de l'api, j'ai créé un gateways le dossier mon src le dossier et j'ai mis des fichiers en arrière-plan, la création d' axios cas, 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 à 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 mixin de vue.js:

Mixin sont un moyen souple de distribuer réutilisables fonctionnalités de Vue des composants. Un mixin objet peut contenir toutes les options du composant. Lorsqu'un composant utilise un mixin, toutes les options dans le mixin sera "mixte" dans le composant propres options.

Ainsi, vous pouvez ajouter une méthode dans 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')
  }
})

Answer 3

Je suis l'aide de Vue des Ressources pour la plupart.

1.J'ai créer un nouveau fichier où je fais de la connexion à l'API d'extrémité à l'aide de Vue.http.xxx.Donc, nous allons dire que nous n'avons point de terminaison de la sortie de la les postes.Créer un nouveau répertoire dans votre projet, j'appelle ça de l' services, puis créer un fichier appelé PostsService.js - contenu ressemble à ceci:

import Vue from 'vue'

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

Puis-je aller à la composante où je veux utiliser ce service, et de 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 d'informations sur cette approche, n'hésitez pas à consulter mon repo GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

Answer 4

Je suggère la création d'une API Fournisseur que vous pouvez accéder à partir de n'importe où dans votre application.

Il suffit de créer un src/utils le dossier et à l'intérieur un fichier appelé api.js.

En elle, l'exportation de votre wrapper qui sait comment communiquer avec votre API comme un objet ou une ES6 statique de la classe (je préfère la manière dont ce dernier ressemble et fonctionne si vous n'avez pas peur de classes). Ce fournisseur peut utiliser une requête HTTP de la bibliothèque que vous aimez et vous pouvez facilement le remplacer plus tard par la modification d'un fichier unique (celui-ci) au lieu de la chasse à l'ensemble de la base de code. Voici un exemple d'utilisation de l'axios, en supposant que nous avons une API REST disponible à l' api.example.com/v1 qui utilise le protocole 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 main.js le fichier ou n'importe où ailleurs bootstrap la Vue application, procédez de la manière suivante:

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

Vue.$api = api

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

Maintenant, vous pouvez y accéder de n'importe où dans votre Vue application aussi bien que n'importe où vous importez de la Vue elle-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
}

Espérons que cette aide.

Answer 5

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 intégré aux composants.