Jaki jest odpowiednik usługi Angular w VueJS?

Chcę umieścić wszystkie moje funkcje, które komunikują się z serwerem i pobierają dane w jednym pliku wielokrotnego użytku w VueJS.

Wtyczki nie wydają się być najlepszą alternatywą. Szablon mniej komponentów ..?

W sumie są 4 sposoby:

• Usługa bezstanowa: wtedy powinieneś używać mixinów
• Usługa stanowa: użyj Vuex
• Eksportuj usługę i importuj z kodu vue
• dowolny obiekt globalny javascript

Używam Axios jako klienta HTTP do wykonywania wywołań API, utworzyłem gatewaysfolder w moim srcfolderze i umieściłem pliki dla każdego zaplecza, tworząc wystąpienia Axios , takie jak następujące

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

Teraz w swoim komponencie możesz mieć funkcję, która będzie pobierać dane z interfejsu API, jak poniżej:

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

Ponieważ zakładam, że chcesz ponownie użyć tej metody w wielu komponentach, możesz użyć miksów vue.js:

Miksery to elastyczny sposób dystrybucji funkcji wielokrotnego użytku dla komponentów Vue. Obiekt mixin może zawierać dowolne opcje składnika. Kiedy komponent używa miksera, wszystkie opcje w miksie zostaną „wmieszane” do własnych opcji komponentu.

Możesz więc dodać metodę do mixinu i będzie ona dostępna we wszystkich komponentach, gdzie mixin będzie mieszany. Zobacz następujący przykład:

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

Używam głównie zasobów Vue.

1. tworzę nowy plik, w którym wykonuję połączenie z punktem końcowym API za pomocą Vue.http.xxx. Powiedzmy, że mamy punkt końcowy, który wyprowadza posty, stwórz nowy katalog w swoim projekcie, nazywam go services, a następnie tworzę plik o nazwie PostsService.js- zawartość wygląda tak:

import Vue from 'vue'

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

Następnie przechodzę do komponentu, w którym chcę skorzystać z tej usługi i importuję ją

import PostsService from '../services/PostsService'

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

Aby uzyskać więcej informacji na temat tego podejścia, sprawdź moje repozytorium na GitHub https://github.com/bedakb/vuewp/tree/master/public/app/themes/vuewp/app

Proponuję stworzyć dostawcę API, do którego będziesz mieć dostęp z dowolnego miejsca w aplikacji.

Po prostu utwórz src/utilsfolder, a wewnątrz niego plik o nazwie api.js.

W nim wyeksportuj swój wrapper, który wie, jak komunikować się z twoim API jako obiekt lub klasę statyczną ES6 (wolę, jak ta druga wygląda i działa, jeśli nie boisz się klas). Ten dostawca może używać dowolnej biblioteki żądań HTTP, którą lubisz, i możesz ją łatwo zamienić później, zmieniając pojedynczy plik (ten) zamiast przeszukiwać całą bazę kodu. Oto przykład użycia axios przy założeniu, że mamy REST API dostępne pod adresemapi.example.com/v1 które używa 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
})

Następnie w twoim main.js pliku lub w innym miejscu, w którym ładujesz aplikację Vue, wykonaj następujące czynności:

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

Vue.$api = api

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

Teraz możesz uzyskać do niego dostęp w dowolnym miejscu aplikacji Vue, a także wszędzie tam, gdzie importujesz Vue:

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

lub:

// 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
}

Mam nadzieję że to pomoże.

Myślę, że na twoje proste pytanie odpowiedzią może być dowolny moduł ES6 zawierający funkcje (odpowiednik metod w klasie w ANgular) i bezpośrednio importujący je do komponentów za pomocą importu i eksportu ES6. Nie ma takich usług, które mogłyby zostać wprowadzone do komponentów.

Możesz stworzyć własną usługę, w której możesz umieścić wszystkie wywołania serwera HTTP, a następnie zaimportować je do komponentów, w których chcesz ich używać.

Najlepiej jest używać Vuex do złożonych aplikacji do zarządzania stanem, ponieważ w Vuex możesz obsługiwać wszystkie wywołania asynchroniczne za pomocą akcji, które zawsze działają asynchronicznie, a następnie zatwierdzają mutację, gdy uzyskasz wynik. Mutacja będzie bezpośrednio oddziaływać na stan i zaktualizuje się w niezmienny sposób (co jest preferowane). To jest podejście stanowe.

Istnieją również inne podejścia. Ale to są te, które kieruję się w swoim kodzie.