Consumindo uma API com Vue Vuex

O Vue nada mais é que um framework que define componentes, sendo utilizado geralmente para montar partes de qualquer interface. Por esse motivo, pode ser integrado facilmente com outros frameworks e interfaces já existentes.

Esses itens tornam o Vue um framework muito leve e dinâmico, comprovando na versão 2.0, que, cada vez menos, pode ser considerado apenas um “componentizador” de interfaces.

Neste artigo, consumiremos uma API e faremos a listagem de um conteúdo utilizando Vuex para comprovar a praticidade e a simplicidade de trabalhar com esse framework.

Crie um dockerfile Dockerfile.

FROM node
RUN npm install -g vue-cli
EXPOSE 8080
CMD npm run dev

Agora para o processo de build:

$ docker build -t simple-vuex .
$ docker run -v $(pwd):/usr/src/simple-vuex -w /usr/src/simple-vuex -it --rm simple-vuex bash
# Rode os comandos dentro do container
# E responda o dialogo
$ vue init webpack .
? Generate project in current directory? Yes
? Project name simple-vuex
? Project description A Vue.js project
? Author 
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
$ npm install --save vuex vue-resource
$ npm install
$ exit
# Fora do container, 
# mude a permissão dos arquivos, 
# pois o docker irá criar todos como root
$ cd .. && sudo chown -c -R <linux_user>:users ./simple-vuex && cd ./simple-vuex
$ docker run -v $(pwd):/usr/src/simple-vuex -w /usr/src/simple-vuex -it --rm -p 8080:8080 simple-vuex

Ao acessar o seu localhost, você irá visualizar a imagem a seguir:

Primeiro, vamos criar o componente que será responsável por listar as pessoas:

src/componets/People.vue
<template>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Genero</th>
        <th>Altura</th>
      </tr>
    </thead>
    <tbody>
      <!-- For do vue para a propriedade passada -->
      <tr v-for="person in people">
        <td>{{person.name}}</td>
        <td>{{person.gender | capitalize}}</td>
        <td>{{person.height | height}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
// declaração das propriedade que o componente irá receber
export default {
  props: {
    people: Array
  }
}
</script>

<style>
</style>

Agora criamos um arquivo de ações, que, de acordo com a documentação do Vue, são funções que despacham mutações.

src/vuex/actions.js
// Dependencias
import Vue from 'vue'

// Requisição
const req = function (path) {
  return Vue.http.get(`http://swapi.co/api/${path}`)
}

// Está é a ação que iremos utilizar para pegar todas as pessoas
export const getPeople = ({ dispatch }) => {
  // Requisição
  req('people').then((res) => {
    // Depois que a requisição terminar, passamos o resultado para função dispatch que se encarregará de atualizar a mutation
    dispatch('GET_PEOPLE', res.data.results)
  })
}

No próximo arquivo, iremos definir as mutações. Mutações são essencialmente eventos, assim, o primeiro atributo do dispatch chamará a mutação com o respectivo nome.

src/vuex/modules/people.js
// Define a estrutura do estado
const state = {
  list: []
}

// Define as possíveis mutações do estado
const mutations = {
  //
  GET_PEOPLE (state, people) {
    // Put it into the state
    state.list = people
  }
}

// Exporta tudo
export default {
  state,
  mutations
}

Para lidar com os dados, iremos utilizar alguns filters src/main.js.

import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
import store from './vuex/store'

//
Vue.use(VueResource)

// Declaramos alguns filters para poder utilizar no template
Vue.filter('capitalize', (value) => {
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.filter('height', (value) => {
  return `${Number(value) / 100}m`
})

/* eslint-disable no-new */
new Vue({
  store,
  el: 'body',
  components: { App }
})

As mutations precisam ser declaradas em store src/vuex/store.js.

import Vue from 'vue'
import Vuex from 'vuex'

import people from './modules/people'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    people
  }
})

E, finalmente, colocamos tudo junto em src/App.vue.

<template>
   <people :people="people" v-show="!loading"></people>
   <div v-show="loading" class="loader">Loading...</div>
</template>

<script>
import People from './components/People'

// Importa a ação de recuperar os usuários
import { getPeople } from './vuex/actions'

// Exporta o componente principal
export default {
  vuex: {
    getters: {
      people: ({ people }) => people.list,
      loading: ({ people }) => people.list.length === 0
    },
    actions: {
      getPeople
    }
  },
  created () {
    // Executa a ação
    this.getPeople()
  },
  components: {
    People
  }
}
</script>

Pronto! Agora você tem uma listagem de personagens de Star Wars utilizando Vuex. Parabéns!

Para saber mais como uma API pode te ajudar no desenvolvimento do seu projeto, conheça a www.yebo.com.br.