it-swarm.com.de

Wie strukturiere ich API-Aufrufe in Vue.js?

Ich arbeite derzeit an einer neuen Vue.js-Anwendung. Es hängt stark von API-Aufrufen meiner Backend-Datenbank ab.

Für viele Dinge verwende ich Vuex-Stores, weil sie gemeinsame Daten zwischen meinen Komponenten verwalten. Wenn ich andere Vue Projekte auf github betrachte, sehe ich ein spezielles vuex-Verzeichnis mit Dateien, die alle Aktionen, Zustände usw. behandeln. Wenn eine Komponente die API aufrufen muss, enthält sie die Aktionen Datei aus dem Vuex-Verzeichnis.

Für Nachrichten zum Beispiel möchte ich Vuex jedoch nicht verwenden, da diese Daten nur für eine bestimmte Ansicht wichtig sind. Ich möchte hier die komponentenspezifischen Daten verwenden. Aber hier ist mein Problem: Ich muss immer noch meine API abfragen. Die Vuex-Aktionsdatei sollte jedoch nicht enthalten sein. Auf diese Weise sollte ich eine neue Aktionsdatei erstellen. Auf diese Weise habe ich eine bestimmte Datei mit API-Aktionen für vuex und für einzelne Komponenten.

Wie soll ich das strukturieren? Erstellen eines neuen Verzeichnisses 'api', das Aktionen sowohl für vuex-Daten als auch für komponentenspezifische Daten verarbeitet? Oder trennen Sie es?

32
Jordy

Ich verwende axios als HTTP-Client für API-Aufrufe. Ich habe einen gateways -Ordner in meinem src -Ordner erstellt und für jedes Backend Dateien abgelegt. Axios Instances , wie folgt

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

Jetzt können Sie in Ihrer Komponente eine Funktion haben, die Daten wie folgt von der API abruft:

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

In ähnlicher Weise können Sie dies auch verwenden, um Daten für Ihren Vuex-Shop abzurufen.

Bearbeitet

Wenn Sie produktbezogene Daten in einem dedizierten vuex-Modul verwalten, können Sie eine Aktion aus der Methode in der Komponente auslösen, die intern die Back-End-API aufruft und Daten im Geschäft auffüllt. Der Code sieht ungefähr so ​​aus Folgendes:

Code in der Komponente:

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

Code im Vuex Store:

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

Hinweis: vue-resource ist eingestellt! Verwenden Sie etwas anderes wie Axios.

Ich verwende hauptsächlich Vue Resource.Ich erstelle ein services -Verzeichnis und stelle dort alle Verbindungen zu Endpunkten her, zum Beispiel für 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
}

Dann importiere ich in meine Datei diesen Dienst und erstelle eine Methode, die die Methode aus der Dienstdatei aufruft

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

Basierend auf dem Konzept von Belmin Bedaks Antwort habe ich alles in eine einfache Bibliothek verpackt:

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

Sie können Ihre API folgendermaßen anfordern:

Alle Ergebnisse

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

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

Spezifisches Ergebnis

// GET /posts/1

let post = await Post.find(1)

Bearbeitung

// PUT /posts/1 

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

Beziehungen

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

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