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.