Как структурировать вызовы api в Vue.js?

В настоящее время я работаю над новым приложением Vue.js. Это сильно зависит от вызовов api в моей базе данных.

Для многих вещей я использую магазины Vuex, потому что он управляет общими данными между моими компонентами. Когда я смотрю на другие проекты Vue на github, я вижу специальный каталог vuex с файлами, которые обрабатывают все действия, состояния и т.д. Поэтому, когда компонент должен вызывать API, он включает файл действий из каталога vuex.

Но для сообщений, например, я не хочу использовать Vuex, потому что эти данные важны только для одного конкретного вида. Здесь я хочу использовать данные, специфичные для компонентов. Но вот моя проблема: мне все равно нужно запросить мой api. Но я не должен включать файл действий Vuex. Таким образом, я должен создать новый файл действий. Таким образом, у меня есть определенный файл с действиями api для vuex и для отдельных компонентов.

Как мне это структурировать? Создание нового каталога "api", который обрабатывает действия как для данных vuex, так и для данных, специфичных для компонента? Или отделить его?

Ответы

Ответ 1

Я использую axios в качестве HTTP-клиента для создания api-вызовов, я создал папку gateways в моей папке src и я поставил файлы для каждого бэкэнда, создав экземпляры axios, например, следующие

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

Теперь в вашем компоненте вы можете получить функцию, которая будет извлекать данные из api следующим образом:

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

Аналогичным образом вы можете использовать это для получения данных для своего магазина vuex.

Edited

Если вы поддерживаете связанные с продуктом данные в выделенном vuex модуле, вы можете отправить действие из метода в компоненте, который будет внутренне вызывать бэкэнд-API и заполнять данные в хранилище, код будет выглядеть примерно так:

Код в компоненте:

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

Код в хранилище vuex:

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
}

Ответ 2

Я использую в основном Vue Resource.I создаю каталог services, и там все соединения подключаются к конечным точкам, например, PostService.js

import Vue from 'vue'

export default {
  get(id) {
    retrun Vue.http.get(`/api/post/${id}`)
  },
  create() {
    retrun Vue.http.post('/api/posts') 
  }
  // etc
}

Затем в моем файле я импортирую эту службу и создаю метод, который вызовет метод из служебного файла

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