type - ¿Cómo estructurar las llamadas api en vue.js?

vuex modules

Question

Actualmente estoy trabajando en una nueva aplicación Vue.js. Depende en gran medida de las llamadas a la API de mi base de datos backend.

Para muchas cosas, uso las tiendas Vuex porque administra los datos compartidos entre mis componentes. Al mirar otros proyectos de Vue en github, veo un directorio especial de vuex con archivos que maneja todas las acciones, estados, etc. Entonces, cuando un componente tiene que llamar a la API, incluye el archivo de acciones del directorio vuex.

Pero, para los mensajes, por ejemplo, no quiero usar Vuex porque esos datos solo son importantes para una vista específica. Quiero usar los datos específicos del componente aquí. Pero aquí está mi problema: todavía necesito consultar mi API. Pero no debería incluir el archivo de acciones de Vuex. Así que de esa manera debería crear un nuevo archivo de acciones. De esta manera tengo un archivo específico con acciones api para vuex y para componentes individuales.

¿Cómo debo estructurar esto? ¿Crear un nuevo directorio ''api'' que maneje acciones tanto para datos vuex como para datos específicos de componentes? ¿O separarlo?

Answer 1

Nota: vue-resource está retirado! Usa otra cosa, como Axios.

Estoy utilizando principalmente Vue Resource.I creo el directorio de services , y pongo todas las conexiones a puntos finales, por ejemplo, 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
}

Luego, en mi archivo, estoy importando ese servicio y creo un método que llamaría método desde el archivo de servicio

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

Answer 2

Basado en el concepto de la respuesta de Belmin Bedak, lo he envuelto todo en una simple biblioteca:

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

Puedes solicitar tu API así:

Todos los resultados

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

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

Resultado especifico

// GET /posts/1

let post = await Post.find(1)

Edición

// PUT /posts/1 

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

Relaciones

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

// GET users/1/posts
let posts = await user
  .posts()
  .get()

Answer 3

Estoy usando axios como cliente HTTP para hacer llamadas a la API, he creado una carpeta de gateways en mi carpeta src y he puesto archivos para cada backend, creando instancias de axios , como las siguientes

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

Ahora en su componente, puede tener una función que obtendrá datos de la API como los siguientes:

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

Del mismo modo, puede usar esto para obtener datos para su tienda vuex también.

Editado

Si mantiene datos relacionados con el producto en un módulo dedicado de vuex , puede enviar una acción desde el método en el componente, que llamará internamente a la API de back-end y completará los datos en la tienda, el código tendrá un aspecto similar al siguiente:

Código en el componente:

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

Código en la tienda 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
}