Vue3: composition API e Vuex

Hora da API - Apresentação

Olá, meu nome é Vinicius Neves e eu vou seguir com você nesse curso sobre Vue3. E vamos aprender a fazer várias coisas muito interessantes que esse framework nessa versão nova está disponibilizando para nós.

Eu separei algumas coisas para te dar um monte de spoiler. Vem comigo analisar um pouco desse código.

A primeira coisa: não vamos trabalhar com um projeto que já existe, vamos ter um pouco desse feeling, essa experiência de mercado porque na nossa rotina, na maioria das vezes, trabalhamos em coisas já existem, é difícil levantarmos alguma coisa de raiz, alguma coisa do zero.

Em cima de um projeto que já existe vamos aprimorar esse projeto, ele estava com um estado somente local e agora vamos migrar para fazer comunicação com a API, vamos usar um pouco do Axios.

Vamos melhorar ainda mais também a parte de controle de estado, antes tínhamos um estado só e vamos aprender a trabalhar com módulos de Vuex, ao invés de termos um único estado global gigantesco, vamos separar isso.

Vamos ter o estado raiz, o root, mas também termos o módulo de tarefas e o módulo de projetos. Tem muita coisa que podemos fazer por aí.

Além disso, também vamos aprender a trabalhar com os slots, slots nomeados para ficar bem organizados todos os nossos componentes, a nossa Modal, que é um componente mega simples e muito visual. Só vamos precisar de poucas linhas para conseguir usar ele de fato.

E ainda veremos também alguma coisa sobre reatividade, veremos como o Vue utiliza isso por debaixo dos panos.

Daremos uma olhada, daremos um mergulho mais fundo para entendermos que quando usamos uma variável reativa, o que acontece ali por debaixo dos panos, vamos revelar essa mágica também.

Vem comigo, te espero no próximo vídeo para começarmos a evoluir ainda mais com a Alura Tracker.

Hora da API - Preparando o projeto

É muito comum no dia a dia das pessoas desenvolvedoras trabalhar ou ser realocado em um outro projeto, ou em uma nova empresa e trabalhar já em um projeto existente. E é mais ou menos isso o que faremos aqui junto nesse curso.

Trabalharemos em cima do Alura Tracker. Ela é uma aplicação que consegue controlar o tempo gasto em cada tarefa, vincular uma tarefa a um projeto. Ele já tem uma série de funcionalidades prontas, que interagiremos, evoluiremos ou modificaremos algumas delas.

Vou deixar o link para você na atividade Preparando o Ambiente, você vai conseguir baixar. Eu já fiz o download. Se você baixar o zip, eu deszipei o arquivo, vou entrar na pasta. Vamos colocar primeiro esse projeto para rodar.

Vou abrir com o meu VS Code. Essa é a estrutura do projeto, ele já tem alguns componentes, tem alguns hooks, tem algumas interfaces. Vou abrir o terminal, "Control +". Vou pedir para que o npm instale para mim as dependências desse projeto, npm i.

Esse processo pode demorar um pouco, não tem problema, só faremos ele nesse tempo, que vai levar esse tempo maior, na primeira vez. Daqui a pouco eu te chamo de volta.

Perfeito. Já terminou de instalar aqui. Instalou tudo que precisava. E agora para eu colocar esse projeto para rodar eu vou pedir ao npm para rodar o comando que se chama npm run serve.

Ele vai subir essa aplicação, vai demorar um pouco, ele está compilando, está entendendo quais são os componentes que temos, toda a nossa estrutura. Vou pegar o link “http://localhost:8080/", vou no meu navegador, colar o link. Perfeito. Aqui temos o nosso Alura Tracker já rodando como é hoje.

Ele tem uma feature de modo escuro. Eu posso cadastrar um projeto, por exemplo, posso cadastrar ele mesmo, podemos trabalhar no próprio Alura Tracker, vou salvar, Alura Tracker "Salvar".

Repare que ele já cadastrou o projeto, subiu ali uma caixa de notificação de notificação. E eu posso iniciar uma tarefa que vai ser, por exemplo, “Refatorando o projeto”.

Eu posso dizer que ele está vinculado ao Tracker, inicio a minha tarefa, vou levar o tempo que eu tiver que levar, "stop". E quando eu finalizo, ele insere para mim e guarda essa informação.

Só que se analisarmos aqui o projeto como é hoje, se recarregarmos a aplicação, eu fiz aqui um F5, deu uma atualizada, "F5". Eu perco tanto os meus projetos quanto as minhas tarefas. Porque isso tudo só existe em tempo de execução da aplicação, se eu fechar meu navegador e abrir de novo ou recarregar a página, eu perdi tudo.

E essa é a primeira coisa que vamos começar a mexer aqui, vamos conectar com um backend simulado.

Esse backend, como não é o propósito do nosso curso, é um backend de mentira, ele vai ficar se comportando como se fosse uma API Rest para consumirmos e interagirmos com os dados. E conseguiremos evoluir o nosso projeto.

E como faremos para colocar essa API de mentira, essa API falsa rodando aqui localmente?

Usaremos um camarada chamado Json Server, também vou deixar o link para você, toda a documentação dele está disponível do Github e precisamos inicialmente prestar atenção em dois comandos.

O primeiro, precisamos instalar ele globalmente. Vou copiar o comando npm install -g json-server. Vou adicionar um PowerShell no terminal e vou colar o comando aqui, "Enter".

Nesse meio tempo o npm vai instalar esse pacote globalmente, já terminou. Isso me permite vir no terminal direto e chame o json-server. E eu posso pegar agora o restante o comando, basicamente temos que pedir para ele observar um arquivo chamo “db.json”, --watch db.json.

Vou colocar no terminal. Perfeito. Repara, ele subiu, cumprimentou, falou “Olá”. Ele disse: "Olha só, eu não conheço esse arquivo db.json, vou criar um para você".

Ele criou e liberou alguns recursos, posts, comentários e profiles que é o perfil. Só que não é isso que queremos. Queremos trabalhar com projetos. Eu vou abrir esse “db.json” que ele criou, repara, eu estou com os dois terminais rodando, um está rodando a aplicação. E o outro está rodando o Json Server.

E o que eu vou fazer? Eu não quero nada do código das linhas 8 a 18, nem das linhas 7 a 3. Nós queremos começar a receber projetos, vou dizer que eu quero um recurso chamado projetos, ”projetos”: [].

Se eu salvar, repara que ele já recarregou e identificou: "Você tem um recurso disponível chamado projetos". E agora já podemos começar a interagir com essa API, para fazermos isso utilizaremos o Axios.

Já vou abrir o meu terceiro PowerShell, e vou pedir para o npm instalar no Alura Tracker o Axios para mim, npm i axios. Ele vai adicionar essa dependência, vai adicionar lá no meu package Json.

E agora já conseguimos importar, configurar e começar a trabalhar com o Axios no nosso projeto. E é isso que faremos na próxima aula.

Hora da API - Consumindo a API de Projetos

Agora está na hora de plugarmos a nossa tela, fazer a conexão da nossa listagem de projetos com a API. Vamos devagar entender como isso vai funcionar.

Eu vou agora no VS Code, vou abrir o “db.json” e esse cara que tem a nossa lista de projetos, que está vazia, eu vou criar aqui um novo objeto que vai ter o ID, eu vou dizer que o ID desse projeto inicial é 1 e vai ter também um nome, eu vou fizer que o nome desse projeto é Alura Tracker, { > "id": 1, "nome": "Alura Tracker. Pronto, perfeito.

Como eu sei que esse projeto tem o ID e o nome? Pela interface de projetos. Lá na nossa interface que já existia, ele está nos dizendo que o projeto tem o ID e o nome, "|Projeto.ts". É isso que eu fiz aqui.

Como eu testo para saber se essa API falsa está rodando? Claro, vou abrir meu terminal e ele está me dizendo que se eu acessar a URL ele vai me trazer a lista de projetos, vamos testar. Vou abrir uma nova aba no meu navegador, “localhost:3000/projetos".

Perfeito. Repara que ele retornou um Json com ID e o nome do projeto que colocamos. Perfeito, isso aqui já está funcionando. O Firefox deixa bonito para mim, mas isso nada mais é do que um Json.

E o que eu quero fazer agora. Deixa eu botar em "Dados brutos". Isso aqui é um array, é uma lista de projetos. Agora eu quero plugar o meu componente nessa API. Vamos para o terminal, primeira coisa que precisamos fazer é criar uma instância do Axios, esse cara que vai ficar responsável por fazer essas requisições.

Em “src”, vou clicar com o botão direito, “Novo arquivo”, vou dizer que vai ficar dentro de uma pasta chamada “http” e eu vou criar um “index.ts”. Perfeito.

Esse “index.ts” vai exportar o nosso cliente http e é justamente isso que queremos. Inicialmente, queremos um const clienteHttp = ... Que vai receber alguma coisa. E depois vamos fazer o export default clienteHttp.

E como fazemos para criar um clienteHttp? Como vamos fazer isso utilizando o Axios? É muito simples. Primeira coisa que eu vou fazer é import axios from "axios". E eu vou dizer para o Axios que eu quero criar uma instância, const clienteHttp = axios.create().

Esse método vai me dar uma instância do Axios, se colocarmos o mouse sobre ele, o VS Code já vai nos dizer que esse cara recebe uma configuração e devolve uma instância do Axios. Podemos até tipar ele, ele vai ser um { AxiosInstance }. Vou dar um Enter. Repara que o VS Code, o meu melhor amigo, já fez o import.

E agora o que eu quero fazer é passar o meu objeto de configuração para dentro. E o que eu quero dizer para ele é que todas as URLs dos nossos recursos vão começar com “http://localhost:3000/”, a única coisa que vai mudar é o recurso final.

Vou dizer aqui que a minha URL base vai ser justamente baseURL: "http://localhost/3000/”. E o recurso vai variar, a pessoa que estiver fazendo a requisição vai definir na hora de fazer a chamada, por enquanto é só isso que precisamos configurar. E vou testar agora isso dentro do nosso Store.

Vamos no nosso Store. Repara o seguinte, vou até fechar o terminal para termos mais espaço.

Tudo que fizemos, tudo que já está aqui pronto em relação ao estado são mutations, são mutações, isso quer dizer que aqui não tem uma mudança de estado que depende de uma requisição assíncrona, por exemplo.

É justamente isso que queremos fazer, queremos fazer uma requisição http, quando essa requisição retornar, quando ela for resolvida, eu quero de fato ir lá e alterar o meu estado.

E não podemos fazer alterações assíncronas nas mutations, quando estamos utilizando Vuex existe um tipo específico de ação para trabalhar com requisições assíncronas. Justamente o nome é esse, são ações, são actions.

E é isso que queremos fazer aqui, além de termos as mutações agora, vamos ter as ações, as actions. E o que eu quero fazer aqui? Já temos um arquivo que nos diz os tipos das mutações existentes. Eu vou criar um novo tipo, eu vou dizer que é “tipo-acoes.ts”.

E o que eu quero fazer aqui? Eu quero exportar uma export const OBTER_PROJETOS = "OBTER _PROJETOS". Usamos essas constantes para evitar de ter que evitar de ficar trabalhando com string e se erramos, de repente, o nome da ação ou da mutação no nosso componente, pode dar alguma problema e teremos um erro inesperado: "Olha, você está chamando algo que não existe". E fica mais organizado também.

Pronto, temos aqui o tipo da nossa ação, que é obter projetos. Agora vamos implementar, vou voltar no Store. E vou dizer que eu vou ter uma ação obter projetos, [OBTER_PROJETOS]. Vou pedir para ele importar para mim. Ele já fez o import no topo da página.

Ele é uma método, ele vai receber como argumento todo o contexto da Store, mas eu não quero só isso, mas eu não quero só isso, eu só quero o método commit. Eu vou dizer que eu quero o ({ commit }) (.

Inclusive vamos testar se está auto completando. Repara, tudo isso da lista estaria disponível na rootState, rootGetters, dispatch. Eu não quero nada disso, quero só o commit, porque quando eu resolver a minha requisição eu quero alterar o estado.

E agora o que eu quero? Eu quero ter acesso ao Axios para fazer essa requisição, eu já vou ao topo da página e vou fazer o import http from “@/http”. Vou usar um arroba que é um atalho para src. Agora eu já posso fazer essa chamada, essa requisição.

Volto abaixo na página, vou fazer um http.get, eu quero obter o quê? Qual é a minha chamada? Lembra, temos URL base, precisamos dizer qual é o recurso. Eu quero projetos, http.get( 'projetos' ). É isso que eu quero, fazer essa requisição.

Quando ela for resolvida, isso é uma promessa, o Axios dizendo assim: "Eu não consigo te garantir que isso vai dar certo, mas eu te prometo que eu vou tentar".

E eu quero dizer ok, se tudo der certo quando essa requisição for feito eu vou ter a minha resposta .then(resposta => resposta.dados).

E o que eu quero fazer aqui? Inicialmente eu quero só fazer um console.log. Vamos ver se isso vai funcionar. Repara que eu implementei, mas quem chama? Como eu vou saber qual é o momento certo de fazer isso?

Repara que o VS Code já está reclamando que eu digitei errado. Não existe dados na resposta do Axios porque não é em Português, é em Inglês, é data.

Agora voltando, quem chama esse OBTER_PROJETOS? Se eu voltar agora no Alura Tracker e fazer um "F5". Eu abri o Developer Tools, onde você inspeciona os elementos, tem várias coisas aqui, estou olhando para a rede e estou olhando as requisições que foram feitas. Onde está aquela requisição para projetos?

Ninguém fez porque eu não pedi em nenhum momento para que essa ação seja disparada. Vamos fazer isso, eu quero vir na minha lista de projetos, "Lista.vue". E eu quero dizer aqui que quando no setup do meu componente eu quero já disparar essa ação.

Vou fazer um store.dispatch. Repara, usamos o commit quando é uma mutação e o dispatch quando é uma action. Eu quero fazer o dispatch de OBTER_PROJETOS.

Mais uma vez, o VS Code é meu melhor amigo, já fez o import para mim. E agora eu vou salvar e vou atualizar minha página, vou ficar de olho na console.

Repara, ele já fez o console.log aqui, tem um objeto, ID e nome, que é o Alura Tracker que definimos no nosso “db.json”, nossa API já está retornando. Agora o que precisamos fazer é pegar esse retorno e definir o estado.

Voltando na nossa Store, ainda não temos nada que faça isso, não temos uma mutação que defina todos os projetos de uma única vez. Vamos fazer isso. Vou criar um novo tipo de mutação, "tipo-mutacoes.ts".

Vou copiar para digitar mais rápido e o que eu quero fazer aqui é criar uma mutação do tipo definir projetos, export const DEFINIR_PROJETOS = ‘DEFINIR_PROJETOS’. Quero definir todos os projetos de uma vez só.

Criei aqui o tipo, agora eu vou para a Store e vou implementar isso. Vou copiar as linhas 33 a 35 e vou colar abaixo para facilitar. Agora vai ser uma mutação do tipo DEFINIR_PROJETOS, o VS Code já vai fazer o import para mim, eu ainda não tinha feito, DEFINIR_PROJETOS. Só que não é nada desse código que eu copiei que ele vai fazer.

Além do estado, eu vou receber por parâmetro uma lista de projetos e o tipo é um array de projetos, projetos: IProjeto[]).

O que eu quero fazer agora é vir no meustate.projetos = projetos, ele vai receber exatamente esses projetos que eu estou recebendo por parâmetro. Recebi por parâmetro, defini o projeto.

A mutation é a única forma de realmente metermos a mão no estado e alterar. Eu não posso alterar de outra forma.

Agora, por último, o que faremos é o commit dessa ação. Só que eu preciso dizer qual é o tipo da mutation que eu estou chamando, essa mutation que eu estou chamando é justamente o commit(DEFINIR_PROJETOS,.

Fiz a requisição, quando ela voltou eu pego os dados da resposta e defino no meu estado. Vou salvar e vamos ver se isso vai funcionar. Voltei para o Alura Tracker. Perfeito, repara que quando eu salvei ele já recarregou o projeto para mim. Mas eu vou recarregar de novo para ter certeza, "F5".

Ele está vindo do Alura Tracker. Se eu for no meu “db.json” e eu posso dizer que é o ”nome”: “Alura Tracker 3.0”. Volto para o meu navegador, recarreguei. De fato, isso já está vindo da API, ele já está fazendo a requisição. Se olharmos na Rede, ele já tem uma requisição para projetos, podemos ver a resposta abaixo.

Podemos pedir até para ver o dado bruto, "bruto". E o nosso array, a nossa lista de projetos. Já estamos conectados à API, estamos prontos agora para concluir as outras três operações. Precisamos adicionar projetos, editar e excluir projetos. É isso que faremos agora.

Sobre o curso Vue3: composition API e Vuex

O curso Vue3: composition API e Vuex possui 140 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de VueJS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Hora da API
• Organizando a store
• Composition API
• Reatividade
• Toques finais