Construindo Login com Vue.js e Vuex

Introdução

Neste projeto, você aprenderá como construir uma funcionalidade de login usando Vue.js e Vuex. O projeto visa ajudá-lo a entender a integração de componentes Vue.js com um sistema de gerenciamento de estado baseado em Vuex.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como entender a estrutura do projeto e o papel de cada arquivo
• Como identificar o problema na função de login
• Como corrigir a função de login modificando o armazenamento (store) Vuex e o componente Vue

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Entender como estruturar um projeto Vue.js com Vuex
• Aplicar Vuex para gerenciar o estado da aplicação
• Solucionar problemas e corrigir erros em uma aplicação Vue.js
• Integrar Vuex com componentes Vue.js

Entenda a Estrutura do Projeto

Nesta etapa, você aprenderá sobre a estrutura do projeto e os arquivos envolvidos na funcionalidade de login.

A estrutura do diretório do projeto é a seguinte:

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

Os arquivos-chave e seus papéis são:

1. index.html: Este é o arquivo HTML principal que serve como ponto de entrada da aplicação.
2. components/login.js: Este arquivo contém o componente Vue para a página de login.
3. components/panel.js: Este arquivo contém o componente Vue para o painel de boas-vindas.
4. store/BaseModule.js: Este arquivo define o módulo Vuex base.
5. store/UserModule.js: Este arquivo define o módulo Vuex para dados e ações relacionados ao usuário.
6. store/index.js: Este arquivo combina os módulos Vuex e cria o armazenamento (store) Vuex.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página. A página inicial é a seguinte:

Identifique o Problema

O problema é que a função de login não está funcionando como esperado. Após inserir o nome de usuário e clicar no botão "Confirmar", os dados mudam, mas a página de login ainda é exibida, e a página de boas-vindas não é mostrada corretamente.

Para identificar o problema, você precisa ler cuidadosamente o código relacionado na pasta store, especialmente o arquivo UserModule.js, e combiná-lo com seu conhecimento de Vuex.

Corrigir a Função de Login

1. Abra o arquivo index.html e localize a seção TODO na tag <script>.

2. Na seção computed, altere para os seguintes atributos:

   computed: {
     welcome() {
       return store.getters.welcome;
     },
     username() {
       return store.getters["user/username"];
     },
     token() {
       return store.getters["user/token"];
     }
   },
   

   Essas propriedades computadas permitirão que você acesse os dados necessários do armazenamento (store) Vuex.

3. Na seção methods, atualize o método login da seguinte forma:

   methods: {
     login(username) {
       if (username) {
         store.commit("user/login", {
           username,
           token: "sxgWKnLADfS8hUxbiMWyb"
         });
         store.commit("say", "Logged in successfully, welcome back!");
       }
     }
   }
   

   Este método login atualizado irá commitar as ações necessárias para o armazenamento (store) Vuex para atualizar o status de login do usuário e exibir a mensagem de boas-vindas.

Testar a Funcionalidade de Login

1. Salve as alterações no arquivo index.html.
2. Atualize a página web no seu navegador.
3. Insira o nome de usuário "admin" e clique no botão "Confirmar".
4. Você agora deve ver o painel de boas-vindas exibido, como mostrado na imagem "Efeito Concluído".

Parabéns! Você corrigiu com sucesso a função de login e fez as modificações necessárias no código.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.