How to structure api calls in Vue.js?

Question

I\'m currently working on a new Vue.js application. It depends heavily on api calls to my backend database.

For a lot of things I use Vuex stores because it manages sha

Answer 1

Note: vue-resource is retired ! Use something else, such as Axios.

I'm using mostly Vue Resource.I create services directory, and there put all connections to endpoints, for e.g 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
}

Then in my file I'm importing that service and create method that would call method from service file

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