Vue. js: crie um aplicativo de pilha completa com Firebase, Vuex e vue roteador

1. Boas-vindas ao curso!: Bem-vindo a este curso. É ótimo ter você aqui. Meu nome é Chris. Eu sou um desenvolvedor web e criador de cursos online ensinando milhares de alunos em todo o mundo. Eu criei este curso para levar todas as suas habilidades em JavaScript para o próximo nível. Aqui neste curso, vamos construir um aplicativo de pilha completa usando Vue.js, uma das estruturas de front-end mais populares disponíveis hoje. Estaremos construindo um aplicativo de pizzaria onde um usuário pode fazer pedidos do nosso menu de restaurante. Além disso, teremos a facilidade para o proprietário do restaurante entrar em uma seção de administração. Esta seção nos permitirá adicionar ou remover itens do nosso menu, ver quaisquer pedidos atuais e também remover pedidos quando concluídos. Este projeto usará o Cloud Firestore mais recente do Firebase para o back-end de nosso aplicativo, que será usado para armazenar todos os itens de menu junto com quaisquer pedidos. Também aproveitaremos o Firebase para autenticação. isso só permitirá que usuários autorizados entrem em nossa seção de administração, juntamente com certas regras de segurança também. Além disso, manteremos uma loja Vuex local em sincronia com o Firebase para gerenciar o estado do nosso aplicativo. Isso nos permitirá acessar e gerenciar todas as informações de que precisamos facilmente em um local central. Você também aprenderá sobre o Vue Router, que é usado para gerenciar a navegação entre páginas em nosso aplicativo. Aqui, você aprenderá muitos conceitos, como adicionar protetores de navegação e definir o comportamento de rolagem para citar alguns. Nós até passamos para alguns conceitos mais avançados, como carregamento lento e divisão de código, para tornar o aplicativo carregado de forma mais eficiente. O aluno ideal para este curso será alguém confortável construir sites com um pouco de conhecimento JavaScript, experiência de Vue.js, ou mesmo outro framework ou biblioteca como React será uma vantagem, embora eu vou tentar tornar as coisas tão claras quanto possível para pessoas novas no Vue.js. Este curso é ideal para estudantes que procuram ver como tudo se encaixa em um aplicativo de telefone real. Ao final deste curso, você se tornará aplicativos completos de pilha completa usando Vue.js e Firebase. Inscreva-se agora e espero vê-lo no curso. Leve suas habilidades de Vue para o próximo nível. 2. O que você precisará para este curso: Para este curso, há apenas algumas coisas que você precisará, e todas elas são gratuitas para usar e baixar. Você provavelmente já tem a maioria deles. Primeiro é o acesso a um terminal. Se estiver a utilizar um Mac, pode utilizar um terminal integrado. Para acessar isso, você pode usar a pesquisa em destaque pressionando a tecla de comando e espaço juntos. Em seguida, pesquise digitando no terminal. Se você estiver usando o Windows, poderá usar um programa como o PowerShell , fornecido com o Windows. Você pode encontrar isso digitando PowerShell na barra de pesquisa do Windows. Não se preocupe se não estiver familiarizado com o terminal. Só precisamos de alguns comandos e vamos fazê-los juntos quando precisarmos. Você também precisará de um bom editor de texto da Web. Para este curso, usarei o Visual Studio Code. Isso também tem um terminal embutido, o que tornará as coisas ainda mais fáceis para nós. Como vamos usar um terminal bastante durante o projeto. Mas, claro, sinta-se livre para escolher qualquer um que você preferir. Também precisaremos de Node.js e npm instalado também. Estes foram baixados do nodejs.org. Já tenho o Node.js instalado. Caso contrário, vá em frente e clique na versão mais recente e faça o download para o seu sistema operacional específico. Download Node também instala a versão mais recente do npm2, que é um gerenciador de pacotes de nós usado para baixar pacotes JavaScript, que usaremos ao longo deste curso. O próximo é o Vue CLI. Se você acessar github.com/vuejs/vue-cli. Você pode descobrir mais algumas informações sobre o que é a CLI do Vue. Você precisará baixar Nodes antes de fazer isso, pois Node é um requisito para a CLI do Vue. O Vue CLI ou interface de linha de comando, é uma ferramenta que permite andaime rapidamente os aplicativos Vue js com um comando terminal rápido. Ele tem vários modelos que podemos usar para criar aplicativos a partir de uma única página HTML, frutas complexas configurações pacote web. Nós estaremos usando uma versão web pack simples quando um vir a este episódio. Nós cobriremos a instalação do Vue CLI em breve ao iniciar este projeto. No entanto, se você quiser ler este guia para saber mais sobre os modelos, ou até mesmo ir em frente e instalar. Sinta-se livre para fazer isso agora, se não, continue, e vamos instalar isso em breve. 3. Configuração do projeto usando o Vue-CLI: Vou criar este projeto usando uma CLI de visualização para criar rapidamente nosso novo aplicativo. Se você não usou a visualização CLI antes, É uma ótima ferramenta para rapidamente andaime fora do aplicativo e começar a funcionar com o projeto de visualização realmente rápido. Ele inclui tudo o que precisamos para executar aplicativos de visualização, incluindo links como web pack, e nos dá opções para instalar outros plug-ins como bubble e Linda. Se você já tem isso instalado, isso é ótimo e continue. Caso contrário, você precisará executar um comando no terminal para configurar isso. Vou usar o terminal integrado com o código do Visual Studio e, claro, você pode usar um terminal autônomo, se preferir. Vá para o código do Visual Studio. Já tenho o terminal aberto na parte inferior. Se você não clicar nas Opções na parte superior da tela, vá para o terminal e, em seguida, novo terminal. Vou instalar uma visualização CLI globalmente, que ela esteja disponível para todos os projetos e usando o npm. O comando que precisa é npm eu tenho instalar traço g flag, então este é instalado globalmente. Em seguida, o pacote que você precisa é @ vue /cli deu isso alguns momentos para instalar, e então eu vou vê-lo quando isso é feito. Com o vue cli agora instalado podemos usar isso para criar nosso novo projeto dentro do terminal novamente, estou atualmente dentro do diretório de usuário root. Vou usar o comando cd para mudar para a área de trabalho. É aqui que vou adicionar o projeto. Claro, você pode usar qualquer local de sua escolha para atrasar este projeto. Podemos então inicializar o projeto em um terminal usando o comando view create. Em seguida, o nome do nosso projeto, que eu vou chamar de “Planeta da Pizza”. Ele entrou para criar nossos projetos. Vou começar com a bolha padrão e sim lente, pressione” enter”. Isso vai aprender instalar os plugins que é necessário, então mais uma vez, eu vou voltar uma vez que isso é feito. Com isso agora concluído, você deve agora ter a pasta do projeto na área de trabalho aqui. Vou avançar e arrastar isso para o Visual Studio Code, que detectará automaticamente as novas fotos do caminho do arquivo e adicionará isso dentro do terminal. Significa que não precisamos mudar diretórios para esta nova pasta e, mais uma vez, vou abrir o terminal desde que isso recomeçou, estamos na pasta do planeta da pizza. Tudo o que precisamos fazer agora é iniciar nosso servidor de desenvolvimento usando o comando npm, run serve. Vamos começar com isso. Eu também vou abrir o navegador onde podemos acessar isso usando nosso host local. Podemos ver aqui nosso host local está rodando na porta 8080, então eu vou comandar ou controlar clique sobre isso, em seguida, abrir isso dentro do navegador. Esta é a visualização padrão que vemos ao usar a visualização CLI e se você vir esta página, tudo está funcionando bem. Eu vou para o diretório fonte onde quer que os arquivos vue são armazenados, e então ir para o app vue principal e apenas fazer um pouco de trabalho de limpeza com este arquivo. Vou remover a imagem e os componentes HelloWorld. Também podemos remover este componente Helloworld uma vez que estaremos criando o nosso próprio e também a referência HelloWorld da nossa instância vue. Esta div dentro do nosso template é onde podemos adicionar qualquer conteúdo que você deseja aparecer dentro do nosso aplicativo. Vamos começar adicionando elementos “p”. Então aqui dentro podemos simplesmente dizer olá, salvar este arquivo e ir para o navegador e quaisquer alterações são atualizadas automaticamente. Em seguida, vou adicionar as imagens à nossa pasta de ativos, então estas já quando precisarmos delas. As imagens foram fornecidas com este curso, e eu tenho estas disponíveis na área de trabalho. Você pode, claro, usar um conjunto diferente de imagens, se preferir, ou seguir com as exatas que estou usando. Vamos abrir a barra lateral e ir para os nossos bens, que estão dentro da fonte. Podemos pegar a pasta de imagens e arrastar isso aqui para dentro, e todas as nossas imagens estão agora disponíveis quando precisarmos delas. É claro que precisamos de uma pasta de componentes para e isso agora é automaticamente criado fotos ao usar o vue CLI. Para começar, vou adicionar alguns componentes que vão ser um único arquivo. Vamos clicar nos componentes, adicionar um novo arquivo, e o primeiro será o home.vue. O segundo vai ser header.vue foto. Também podemos remover o exemplo HelloWorld pela exclusão. Já que não precisamos disso para o nosso projeto, temos isso no lugar. Vamos passar para o próximo vídeo, onde começaremos a adicionar algum conteúdo a esses novos componentes. 4. O componente cabeçalho: Vou começar com os componentes de cabeçalho que criamos no último vídeo, que terá o nosso logotipo, título do nosso site, juntamente com alguns links para outras páginas. Dentro deste header.vue, vamos começar criando o nosso modelo, que vai conter um elementos de cabeçalho. No topo do nosso cabeçalho vamos ter uma div, que vai ser um logotipo da bolha rapper, e também o título do nosso site. Podemos adicionar uma classe ao nosso div. Podemos vincular isso ao CSS em apenas um momento de logotipo cabeçalho. Dentro daqui, a primeira coisa que eu vou fazer é adicionar nossa imagem e a imagem que está sendo incluída dentro dos ativos na pasta de imagens, vai ser para o planet.jpg, então eu vou vincular isso. Isto é dos ativos../barra, da pasta de imagens e do nome de planet.jpg. Como o texto antigo eu vou adicionar um ícone do planeta de pizza, seguido por um título de nível um, que vai ligar para a nossa página inicial. Podemos adicionar o href como uma barra e, em seguida, o título de PIZZA PLANET. Logo após nossa div circundante com nosso logotipo, podemos então adicionar nossos links para diferentes áreas ou diferentes componentes de nossa aplicação. Vamos adicionar estes dentro de um elemento de navegação. Para começar, vou codificar outra lista até que estejamos na frente e roteamento mais tarde no curso usando o roteador de visão. A lista não ordenada, o primeiro item da lista, que também vai ser um link, vai vincular a uma rota inicial de barra. O nome do link de casa. Cada link, Eu vou adicionar um elemento span com o ícone Tilda para separar cada um. O próximo eu vou copiar o span e também o item da lista. Cole isto. Este é um link para nossos componentes de menu, que é encaminhado/menu. O próximo é para a página de contato conosco. O href é simplesmente encaminhamento/contato. O último é para o sobre este link. Vamos adicionar isso. Isto não precisa de espaço. Vamos mover isto. O texto de sobre nós. O href é simplesmente encaminhado/sobre. A próxima coisa que precisamos para o nosso cabeçalho é adicionar os scripts. A única coisa que precisamos adicionar por enquanto é o nome dos nossos componentes. O nome será o cabeçalho do aplicativo. A próxima coisa que eu queria fazer após o modelo e script é também adicionar a seção Estilo onde podemos adicionar esses estilos para cabeçalho. Inclua também essas palavra-chave com escopo, o que significa que os estilos serão aplicados somente a esses componentes únicos e não para o resto do site. Vamos começar selecionando nosso título de nível 1, que é para o título do site. Podemos fazer o tamanho da fonte um pouco maior. Eu quero definir o meu para ser 1.3 ms. Quando criamos nosso modelo logo acima, cercar uma legenda interna e também nosso logotipo. Temos este div com a classe de logotipo cabeçalho. Eu vou usar essa classe para adicionar um gradiente linear, que vai fazer algumas listras como uma imagem de fundo. Vamos pegar isso. Logo abaixo do nosso H1. Podemos tomar isso como uma classe definindo a imagem de fundo. A imagem de fundo vai ser um gradiente linear. Para configurar nossas listras em um ângulo de 45 graus separá-lo por vírgula, também agora precisamos adicionar os estágios que as cores vão aparecer. Vou alternar entre duas cores para criar os efeitos de listras. Na primeira cor, que eu vou adicionar é um valor x de d85226 e, em seguida, 25 por cento. Isso basicamente significa que o início do gradiente de zero a 25 por cento consistirá dessa cor. Podemos então adicionar nossa segunda cor, que vai ser o valor de f79e38. Esta cor vai se aplicar de 25 por cento a 50 por cento. O segundo trimestre do gradiente, para o terceiro trimestre, vamos voltar para a nossa cor original. Vamos adicionar o mesmo. Isso vai ser de 50 por cento a 75 por cento. Para o último trimestre do gradiente, vamos voltar para a nossa cor mais clara. Vamos adicionar isso. Isto vamos executá-lo a partir de 75 por cento em diante. Podemos então terminar nosso gradiente com a mesma cor. Isso será executado até o final dos gradientes, que é 100 por cento. Podemos então especificar o tamanho com a propriedade tamanho de fundo, que eu vou definir para um valor de 80 pixels. Depois 80 pixels. O tipo de exibição será flexível. Então, neste, o flex nos permitirá adicionar a direção flexível para ser coluna, que permitirá que nossos itens sejam empilhados em cima um do outro. Nós temos o logotipo do site em cima do título do site. Nós também pode adicionar a propriedade itens align, defina-os no sensor. Então, finalmente, termine as coisas com algum preenchimento no topo de alguns pixels. Mantenha isso longe do topo do navegador. Mas adicionamos mais estilos. Vamos adicionar isso ao nosso app.vue. Então podemos ver isso dentro do navegador. Lembre-se, todos os arquivos que criamos são componentes independentes de um único arquivo. O que significa dizer exatamente onde queremos que isso apareça dentro de nossos projetos. O app.vue é nossos principais componentes e podemos usá-lo como um invólucro para todos os nossos componentes. Para começar no topo de nossos scripts, precisamos adicionar uma importação onde importamos nosso cabeçalho do caminho do arquivo de componentes barra ponto e esse cabeçalho. Precisamos de uma propriedade de componentes que já temos do conteúdo fornecido quando criamos isso com a visualização CLI. Então aqui dentro podemos adicionar o cabeçalho do aplicativo, que vai ser igual ao cabeçalho que acabamos de importar. Então, ao registrar componentes dentro de um vue, não devemos usar um nome de elemento reservado, como cabeçalho. Então, o que estamos fazendo aqui é definir o componente de cabeçalho para ser um alias do cabeçalho do aplicativo. Podemos, portanto, referências-se tinha um loop em nossos modelos onde queremos que isso apareça na tela. Então, podemos mover isso e adicionar dentro de minúsculas o cabeçalho do aplicativo com uma abertura e um elementos de fechamento. Alternativamente, podemos usar uma tag de fechamento automático como esta. Isso também funcionará. Estou tendo um erro aparecendo aqui, e é o caminho do arquivo do cabeçalho. Vamos consertar isso. Isto é suposto ser PNG. Então guarde isso. Agora podemos ir para o navegador. Agora vemos nosso logotipo aparecer com os gradientes lineares de fundo. Nós também temos o título do site e também nossos links de navegação apenas aqui. Só para terminar este vídeo, vamos adicionar um pouco de estilo ao resto desses links e também podemos fazer o logotipo um pouco menor. Então de volta ao header.vue. Podemos rolar para baixo até nossos estilos. Vamos começar por segmentar a imagem do logotipo do cabeçalho. Então ele tinha um logotipo, podemos pegar o elemento de imagem e, em seguida, definir o valor de p de largura máxima de 25 vw, que é 25 por cento da largura da porta de exibição. Em seguida, estou estilizando para todos os links na parte inferior, podemos pegar a lista desordenada. Defina o preenchimento como um valor de 10 pixels na parte superior e inferior, zero à esquerda e à direita. Também podemos selecionar os itens da lista e também definir a exibição para ser inline-block. Salve isso. Além disso, vamos finalmente adicionar uma consulta de mídia, que vai fazer esta imagem um pouco menor quando chegarmos a 900 pixels e acima. Vamos adicionar isso logo após o item da lista. Na mídia, vamos segmentar essas telas que têm uma largura mínima de 900 pixels. Podemos então segmentar nossa imagem do logotipo do cabeçalho, que você tem apenas aqui. Podemos adicionar isso dentro e soltar isso para um valor de 20 vw. Então agora em uma tela menor, este é um corpo de 25 por cento. Podemos aumentar para 900 pixels. Então vemos a imagem cai para baixo para torná-la um pouco menor. É isto. Agora, para o nosso cabeçalho, voltaremos a esses componentes mais tarde quando adicionamos um roteamento front-end. Mas, por enquanto, vamos para a nossa página inicial. 5. O componente página inicial: Agora é hora de adicionar o conteúdo ao arquivo do componente da página inicial. Como podemos ver aqui a partir desta versão final, será adicionando a seção de boas-vindas, que é esta seção apenas aqui. Isso será vinculado ao nosso Menu quando o usuário clicar no botão “Vamos pedir”. Se voltarmos atrás, logo abaixo desta seção também podemos ter três seções separadas, que são a ordem, informações de entrega e a seção de histórico. Estes blocos de informação são realmente componentes separados e isso nos permitirá reutilizá-los mais tarde. Podemos alternar entre eles, quando configuramos o roteador de visão. Então, por enquanto, vamos deixar de fora esses três componentes, e apenas nos concentrar nesta seção apenas aqui. Vamos para o home.vue, que é um componente que já configuramos. Podemos começar por criar em nosso modelo familiar e, em seguida, aninhado dentro aqui, eu vou adicionar duas divs. Então a primeira div vai ser o invólucro. Este vai ser o wrapper de fundo, que vai ser o contêiner circundante, onde podemos adicionar uma imagem usando CSS, aninhado dentro aqui vamos ter um wrapper de sobreposição de fundo, que vai ser para a caixa no centro. Então, este primeiro. Vamos adicionar a classe de fundo isto é para a imagem. A segunda div, isto é para a caixa com a classe de sobreposição de fundo. Então, dentro da sobreposição de fundo, vamos começar com o título de nível dois, que é o texto de Bem-vindo ao Pizza Planet. Depois disso, adicionamos nossa imagem, que é a imagem do rolo que acabamos de ter aqui. Vamos adicionar a imagem aqui dentro, que é a fonte de../. Esta é a pasta Assets nas imagens e no roller.png. Nós também podemos adicionar as tags alt do rolo e, em seguida, seguido pelo título de nível três, que é o texto de, “Sentindo fome?” Mas agora vamos apenas adicionar um botão simples, este botão será ligado mais tarde quando adicionarmos o roteador vue. Então, por enquanto, vamos apenas adicionar um botão h. Podemos adicionar uma classe para o estilo de ordem- btn eo texto “Vamos pedir!” Então este é todo o conteúdo para nossos modelos. Pouco antes de seguir em frente, nós também podemos adicionar nosso script e dentro do script tudo o que vamos fazer é adicionar um nome para nossos componentes dentro dos padrões de exportação com o texto da casa. Salve este arquivo. Assim como fizemos com o cabeçalho, podemos aninhar está dentro do arquivo app.vue e registrar este componente Home. Vá para o app.vue, vamos descer. Nós também podemos importar casa, de nossos componentes, que é./ Componentes e, em seguida, casa. Em seguida, precisamos registrar isso adicionando isso aos objetos componentes. Nós podemos adicionar um componente exatamente como fizemos aqui, onde nós importá-lo por um nome como cabeçalho ou outra maneira de fazer isso é usar o nome que usamos ao importar, então apenas home e isso é bom se não houver conflitos de nomeação com HTML elementos. Assim como no início quando fizemos com o cabeçalho, este é um nome de elemento HTML, portanto, tivemos que dar este alias de cabeçalho aplicativo. Então agora temos isso importado. Podemos ir até o topo, logo abaixo do cabeçalho do aplicativo, podemos adicionar nossa casa aqui dentro. H, salve este arquivo. Eu vou verificar isso está mostrando dentro do navegador, diz que eu tenho um componente agora exibido na página inicial. Vamos adicionar um pouco de estilo em apenas um momento. Por enquanto, porém, eu vou remover o espaço em branco que está no topo do app.vue, então vamos rolar para baixo. Poderíamos remover o estilo padrão que é fornecido onde diz sobre projetos. Isso agora empurra o cabeçalho de volta para o topo e agora podemos ir tudo para o home.Vue, podemos configurar nossas tags estilo. Vou remover a bandeira do escopo e começar com nossas rubricas. Nós rolamos para cima, temos um nível dois e também um nível três título. Vamos começar com estes e digite o h2 e também o h3 e adicionar alguma margem de dois por cento. Logo depois disso, podemos direcionar o fundo, que é o contêiner principal. Aqui é onde vamos adicionar a imagem de fundo, que vai ser, e vamos dar uma olhada na versão final, esta foto, como vemos aqui. Vamos selecionar o plano de fundo. Primeiro de tudo, queremos definir a imagem, o que podemos fazer com a propriedade de fundo, definindo a URL e, em seguida, passando em um caminho de arquivo. O caminho final que queremos é. /, esta é a pasta Assets Imagens, e, em seguida, a imagem que você deseja é dough.jpg nós também podemos centralizar isso. Em seguida, defina o tamanho do fundo para cobrir. Se salvarmos isso e passar para o navegador, agora temos a imagem de fundo. Vou definir a altura para ser, 30vh. Que é 30% da porta vue ou da altura do navegador. Defina o tipo de exibição para usar a flexbox. Podemos alinhar o texto no centro. Então, finalmente, também podemos alinhar nossa caixa no centro também e vamos alinhar isso verticalmente usando itens align, esta é uma propriedade flexbox e queremos definir o valor para estar no centro. Então agora podemos passar para a sobreposição de fundo real, que é o texto e também a imagem e o botão. Logo abaixo do fundo. Esta é a sobreposição de fundo. Onde também queremos fazer uso do tipo de exibição de flex. Podemos definir a direção flexível para ser coluna, para estocar estes verticalmente. Também precisamos de um plano de fundo, então isso é mais visível sobre a imagem de fundo. Vou usar um valor de f1e6da. Então, você ainda pode ver a imagem de fundo. Eu também vou adicionar o valor positivo de 0,8, para tornar isso um pouco transparente. Podemos ver isso aqui. Podemos controlar a largura. Vou usar um valor de 50%. Centralize isso com margem zero auto. Algum preenchimento dentro de cinco pixels. Vamos manter o texto longe da borda interna. Certo, então está tudo centrado no Norrow. Precisamos reduzir o tamanho desta imagem em rolo. Então vamos entrar novamente dentro da sobreposição de fundo, selecione a imagem e podemos dizer que a largura máxima para ser um valor de 15 por cento. Só agora precisamos empurrar isso de volta para o centro. Podemos fazer isso com a flexbox de volta na sobreposição de fundo. Eu coloquei em itens alinhados, para estar no centro. Lá vamos nós, e, finalmente, vamos segmentar o botão Ordem e dar a isso uma cor de fundo diferente e também algum preenchimento. Então, bem no final de nossas folhas de estilo. Demos a este botão a classe de ordem quando esta chamada nosso btn, que é esta classe apenas aqui. Então vamos pegar isso, adicionar isso. Vamos primeiro começar com a cor de fundo, que vai ser f79f38, um raio de borda e queremos manter este pequeno, então um valor de três pixels é bom, alguma margem na parte inferior de 10 pixels. Alguns preenchimento para fazer a bola em um pouco maior de 10 pixels. Podemos então selecionar o cursor para ser um ponteiro. Então salve isso e vá para os projetos. Agora temos a cor de fundo, o raio da borda e nosso cursor agora está mudando para um ponteiro. Então esta é agora a nossa configuração básica da página inicial e exibida no navegador. Na próxima seção, vamos nos concentrar em obter nosso menu e nosso carrinho de compras tudo configurado para receber dados do Firebase. 6. Criando o componente menu: Quando criamos nossos componentes de cabeçalho, adicionamos um link para o menu. Este componente de menu que vamos agora começar a trabalhar, acabará por ser onde puxamos todos os itens de menu do nosso banco de dados. Se olharmos para a versão final e seguirmos para o menu, esses itens serão listados no lado esquerdo, que o usuário pode selecionar quais peças deseja encomendar. Eles serão então adicionados ao cesto de no lado direito, que também pode aumentar ou diminuir a quantidade e, em seguida, finalmente, fazer o pedido. Este pedido também será enviado para o Firebase e também estará disponível em nosso administrador. Tanto os itens do menu como também os pedidos serão mantidos em sincronia com uma loja central dois dentro do nosso aplicativo, que vamos dar uma olhada mais tarde. Agora vamos adicionar os componentes menu.vue dentro da nossa pasta de componentes. Vamos para o molho, dentro dos componentes. O menu.vue. A primeira parte é criar nosso modelo, que será apenas uma tabela HTML para exibir nossos dados. Esta tabela será usada para exibir nossas pizzas com os nomes e opções disponíveis. Isto será apenas informação estática por enquanto até começarmos a trabalhar com o Firebase mais tarde. Para começar, adicionamos nossos modelos, então dentro podemos adicionar uma div, que vai ter a classe de menu no invólucro do céu. Dentro desta div, isto vai ter o nosso menu e também as cestas. Por agora eu vou ter um comentário do menu para que possamos ver claramente qual seção esta é. Podemos então adicionar uma div com uma classe de menu. Dentro daqui vamos ter um título de nível três, que será o texto da autêntica pizza artesanal, vamos então configurar a nossa mesa, que terá alguns dados de amostra por enquanto. Nível três, vou cercar isso dentro do Tilde, pizza artesanal tão autêntica. Então podemos montar a nossa mesa logo abaixo. Nós não vamos ter um cabeçalho de mesa, então eu vou apenas saltar direto para o corpo da mesa. Dentro do corpo da mesa, vamos configurar linhas de tabela livres. O primeiro vai ser para o título da pizza, uma segunda linha para a descrição, e depois uma terceira linha que vai ser para as opções. Dentro da primeira linha da tabela, podemos adicionar nossos dados da tabela. Em seguida, dentro dos dados da tabela, eu vou adicionar essas tags fortes para fazer este negrito, e em seguida, um nome de pizza dentro do til. Vou adicionar pepperoni, seguido por um til no final também. Esta é a nossa primeira fila. O segundo vai ser para a descrição. Adicione uma nova linha logo abaixo dos dados da tabela e, em seguida, isso vai ser as pequenas tags para fazer isso um pouco menor, eu vou adicionar alguns Lorem Ipsum. Se você estiver usando o Visual Studio Code, você pode digitar a palavra Lorem e clicar em Tab, ou você pode adicionar qualquer exemplo de dados que você deseja, isso realmente não importa, pois isso será retirado do Firebase muito em breve. Após esta linha da tabela, vamos criar mais uma, que será para nossas opções. Nossa tabela de dados que começa com uma pizza de 9 polegadas. Logo abaixo, também podemos adicionar o preço. Eu vou adicionar 695 seguido por um botão, então td, e então dentro aqui podemos adicionar nosso botão, que será o símbolo mais para adicionar isso às nossas cestas. O botão precisa de um tipo de botão e também uma classe para o CSS, que uma vez chamamos btn underscore green, um símbolo mais direito. No momento, não temos nenhuma maneira de dizer vista que queremos que esses componentes para exibir quando clicamos nas rotas do menu barra. Como ainda não temos uma configuração de roteador, como medida temporária, podemos adicioná-lo ao arquivo app.view, que possamos ver que ele está dentro do navegador. Vamos começar importando isso, logo abaixo dos componentes domésticos. Queremos o nosso menu, nosso menu a partir daqui. Nós também podemos registrar isso logo abaixo da casa, e depois adicionar isso acima dentro do nosso modelo. Vamos verificar isso. Mais dentro do navegador, então lá vamos nós então temos o nosso título, temos o nosso título de pizza, nossa descrição e também a opção logo abaixo. Esta opção será um loop, então mais tarde, quando usarmos o banco de dados, veremos as opções disponíveis e mostraremos os diferentes tamanhos e preços. Vou corrigir o erro de ortografia dentro do menu. Lá vamos nós. Com isso agora no lugar, agora podemos adicionar algum estilo em nossos componentes de menu. Leve cabeça para o menu.vue. Podemos então rolar para baixo até a parte inferior. Podemos configurar nossas tags de estilo. Eu vou deixar isso como escopo para este componente, então isso só se aplica a este único arquivo em vez do resto do projeto. Vamos começar com o nosso nível três título, que é o autêntico título de pizza artesanal. Tudo o que precisamos fazer aqui é definir o texto align, seu estar no centro. Próxima aberto ido para o alvo, o invólucro de menu. Lembre-se que o invólucro do menu vai ser o recipiente principal. Iria até o topo. Isto vai cercar o nosso menu e também as cestas. Se dermos uma olhada na versão final, isso vai significar se rolarmos isso para baixo, que o menu e também a cesta serão empilhados verticalmente em uma tela menor, então vamos adicionar uma consulta de mídia, então estes aparecem lado a lado. Vamos descer e começar isso agora. Para fazer isso, podemos alterar o tipo de exibição para ser flexbox, e, em seguida, na tela menor, podemos definir a direção flexível para ser coluna. Vamos adicionar uma consulta de mídia alterações de volta à linha muito em breve. Permite também segmentar o menu, que é o lado esquerdo. Vou definir a cor de fundo para ser um valor de F1, E6, DA, um raio de borda, que será de três pixels. Nós também podemos fazer isso a altura total do navegador, enviando-o para ser um 100 vh. No momento, parece muito pequeno porque queremos obter um item, mas podemos fazer isso ver altura total para o navegador, mesmo sem o conteúdo. Esta tem que ser a propriedade height para ser 100 vh, alguma margem de dez pixels, adicionar algum espaçamento, e também algum preenchimento de dez pixels, o interior do menu. Guarde isto, desloque-se para baixo e lá está o nosso menu. Agora só precisamos adicionar uma consulta de mídia para fazer isso uma linha nos verdes maiores. Ainda dentro das tags de estilo, podemos adicionar a consulta de mídia, que vai segmentar as telas que são uma largura mínima de 900 pixels. Então tudo o que queremos fazer aqui é pegar o invólucro do menu, que temos aqui. Então eu mudo a direção do fluxo para baixo e também adiciono algum espaço no meio, então a direção flexível muda para a linha. Podemos então também justificar o conteúdo para ser espaço entre. Isso também significa que mais tarde, quando também tivermos nossas cestas, também teremos algum espaço entre o menu e as seções da cesta. Nesta tela maior, também precisamos definir o menu para ter uma certa largura para que ele não abranja toda a largura do navegador. Podemos fazer isso direcionando a classe de menu e, em seguida, definir a largura para ser um valor de 65 Vw. Voltei aos nossos projetos. Agora vemos que temos algum espaço no lado direito para todas as cestas. Se reduzirmos isso, esta será agora a largura total do navegador. Então, esta e também a cesta mais tarde serão empilhadas verticalmente. Ok, então esta tabela parece agora como queremos, mas precisamos configurar as coisas para percorrer um menu com vários itens. Vamos fazer isso no próximo vídeo onde vamos adicionar um objeto para exibir mais itens em nossa tabela. 7. Percorrendo itens do menu em loop: Todas as nossas informações sobre pizza serão eventualmente armazenadas dentro de um banco de dados real. Mas por enquanto eu vou adicionar alguns itens de menu em nossa propriedade de dados para trabalhar com. Vou fazer isso dentro do componente de visualização de pontos do menu. Precisamos adicionar uma tag de script apenas abaixo do nosso modelo. Podemos então adicionar o nosso padrão de exportação familiar onde podemos adicionar nossa propriedade de dados para armazenar todas as pizzas. Dentro da instrução return, eu vou criar um objeto para armazenar estes em chamados get menu itens. Por enquanto, vamos configurar isso como um objeto vazio. Fornecido com este curso é um arquivo de texto chamado objeto pizza que irá conter todos os dados que precisamos. Tenha isso disponível na área de trabalho. Vou abrir isto. Então podemos pegar todo o conteúdo e colá-los dentro de nossos dados. Vamos selecionar tudo, copiar estes. Em seguida, cole isso dentro de obter itens de menu. Tudo o que temos aqui são vários objetos. O primeiro é um objeto que contém uma margarita. Temos uma descrição e, em seguida, dentro aqui temos uma matriz Options. Temos nossos dois tamanhos. Temos um nove polegadas e também uma pizza de 12 polegadas com o preço correspondente. Em seguida, tenha um segundo item, que é um pepperoni, também com a descrição e as duas opções. Com esta propriedade de dados agora disponível, podemos fazer uso de pontos de vista v para a directiva. Para olhar através de nossos dados, podemos fazer isso dentro da tabela onde adicionamos todos os dados estáticos no último vídeo. Para começar sobre os elementos da mesa circundante, eu vou fazer uso do v para a directiva para olhar através. Podemos adicionar v para. Em seguida, dizemos item em obter itens de menu. Obter itens de menu é o objeto que é adicionado à nossa propriedade de dados. Nós, em seguida, armazenar cada pizza individual dentro desta variável item para que possamos acessar está dentro da nossa mesa. Vamos começar removendo o valor codificado de pepperoni dentro das chaves duplas. Podemos então acessar o nome do ponto do item. Com tudo isso dentro dos pequenos tempos podemos remover o Lorem Ipsum. Podemos realmente dobrar chaves, a menos que eu queira acessar a descrição do ponto do item. Salve isso no navegador e podemos ver se isso está funcionando. Vemos que temos um pequeno problema. Ao usar Vue.js e também isso é o mesmo ao usar Reagir a se você já usou antes. Precisamos adicionar uma chave para cada item. Vemos a visão está esperando a directiva v vincular com uma chave única. Para corrigir é ao usar um loop. Também podemos ver que temos o sublinhado vermelho no editor de texto. Nós também pode vincular uma propriedade de chave dinâmica com os dois-pontos e, em seguida, chave. Para cada item individual, precisamos adicionar essa chave exclusiva. Isso é tudo vista vir melhor, manter o controle de cada item quando estamos adicionando, removendo ou atualizando uma lista de elementos. No momento, nosso objeto de pizza contém nomes exclusivos de pizza. Podemos usar. Podemos dizer item.name. Podemos ver instantaneamente ao salvar que são os nossos itens de menu e agora adicionado. No entanto, um valor melhor para uma chave seria um ID exclusivo. Ao usar nosso banco de dados mais tarde um ID exclusivo será gerado para cada item no banco de dados. Podemos voltar e mudar esta chave mais tarde. Mas agora nossos itens gratuitos que você tem dentro de nossos dados. A próxima coisa a fazer é criar um segundo loop, que vai percorrer todas as opções. No momento, só temos o valor codificado da pizza de 9 polegadas. Se formos até nossa propriedade de dados, temos duas opções. Temos os dois valores de nove e 12 polegadas, o que significa que podemos adicionar um segundo loop para passar por estes. Se localizarmos a linha da tabela com o dimensionamento dentro dos elementos de abertura, podemos adicionar um segundo loop seria quatro. Aqui dentro vamos percorrer nossas opções individuais. Lembre-se que temos nossas pizzas individuais armazenadas dentro desta variável de item. Podemos acessar o item. Opções e, em seguida, podemos armazenar cada opção individual em uma variável chamada Opção. Podemos então configurar nossos dados dinâmicos. Em vez dos valores codificados, podemos pedir as chaves duplas. Isso pode ser option.size com a aspas duplas logo depois para sinalizar que isso está em polegadas. Podemos então remover o preço, definir as chaves duplas para ser option.price. Uma vez que salvamos isso, vemos novamente que temos um problema com a directiva de ligação v. Nós também precisamos adicionar isso ao nosso segundo loop dois. Vamos adicionar uma chave. Temos também de acrescentar um valor único a estes dois. Temos apenas dois itens dentro da nossa matriz de opções. Portanto, podemos usar o número de índice de matrizes como uma chave exclusiva. Podemos pegar isso adicionando um segundo valor 12 antes do loop. Em vez de apenas adicionar a variável de opção, podemos adicionar aos colchetes e, em seguida, adicionar um segundo valor que é para o nosso número de índice. Uma vez que este é um array, esta será a opção zero. Então opção um e assim por diante. Ao passar a chave como opção com o número de índice. Salve isso e agora dentro do navegador vemos nossas opções de nove e 12 polegadas. Bem feito se você pode ver os três itens na tela. Se não, não se preocupe, volte. Verifique o código e tente novamente até que eles cheguem ao palco. Junte-se a mim no próximo vídeo onde vamos continuar com os componentes do menu e empurrar as pizzas selecionadas para as cestas de compras. 8. Enviando pedidos a uma matriz: No último vídeo, adicionamos com sucesso os itens de menu a essas rotas de menu. Você pode ver a partir da versão final, se você vai para lá e, em seguida, passar para os nossos componentes de menu, que ainda precisamos adicionar o cesto no lado direito da página. Quando o usuário clicar em uma “Pizza”, clique no “ Símbolo de adição ”, o item aparecerá no lado direito na cesta. Também a casa da cesta queima para alterar a quantidade eo preço total também é atualizado. Neste vídeo, vamos dar o primeiro passo para criar isso adicionando a matriz de cestas para armazenar as pizzas que o usuário adiciona às cestas. Se você ainda não estiver lá, selecione os componentes de menu do Visual Studio Code. A primeira coisa que eu vou fazer é adicionar uma propriedade de dados chamada cesta, que será uma matriz. Até os nossos scripts, dentro dos nossos dados. Vamos adicionar logo acima obter itens de menu. Podemos inicializar nossa cesta como uma matriz vazia, em seguida, adicionar uma vírgula logo depois. Este array será usado para armazenar as pizzas, que é selecionado pelo usuário. As outras peças para esta matriz, precisamos adicionar um método para a adição ao botão Basket. Vamos rolar até o nosso botão. Dentro da tag de abertura botões, eu vou adicionar um clique “Event Handler” com um clique e definir isso igual a um novo método que você ainda não criou chamado AddToBasket. AddToBasket vai levar em duas coisas. O primeiro é o item e, em seguida, o segundo é a opção. O item é o item individual do nosso loop, como uma Margherita. A opção é a opção de qual tamanho de pizza foi selecionado, modo que a versão nove ou 12 polegadas. Rolando para baixo, agora podemos adicionar o método addToBasket. Logo após nossa propriedade de dados, tudo bem, é a chave de fechamento e uma vírgula. Como podemos configurar nossos métodos objeto assim. Vou configurar isso como assíncrono, para que possamos fazer uso de um nome de método assíncrono JavaScript foi addToBasket, que leva no item na opção que é passada quando ela chama. O que você quer que este método seja capaz de fazer? Bem, não vou dizer que pizza é adicionada à nossa cesta. Queremos empurrar um novo item para a nossa matriz cesta. Podemos usar o método de matriz JavaScript chamado push para fazer isso. Então, digamos que o sabão, podemos selecionar nossas cestas. Com isso.cestas, podemos usar o método push JavaScript. O item que queremos empurrar é um novo objeto de pizza. Podemos preparar isto. Podemos pegar o nome do nosso item, que está sendo passado. Estes são os objetos de pizza completos. Então, podemos soltar o item e, em seguida, selecionar o nome individual. Nós também podemos fazer o mesmo para o preço. Podemos pegar um item, selecionar o preço da pizza. Também o tamanho. O tamanho está disponível dentro das opções. Pegamos a opção desse tamanho. Finalmente, também queremos definir a quantidade como um valor inicial de um. Agora com isso no lugar, podemos fazer um teste. Se rolarmos até nossos modelos, podemos tentar produzir o valor da cesta e verificar se isso é atualizado com cada nova pizza. Pode ter isso em qualquer lugar dentro do nosso modelo que você simplesmente emite o valor das cestas. Vá para os nossos projetos e para o menu. Vamos tentar clicar em um desses. Esta é a Margherita de 12 polegadas. Você tem o nome e também o tamanho dentro daqui. Vamos experimentar um nove em presunto e abacaxi. Isso foi adicionado ao nosso carrinho para. Se formos em frente, porém, e adicionar a mesma pizza, mais uma vez. Sempre que nove polegadas abacaxi, podemos ver o interior da nossa matriz, agora temos três itens individuais em vez de a quantidade ser aumentada. Podemos melhorar isso ainda mais, verificando primeiro se um item já está dentro das cestas. Se não, adicionaremos a pizza nova. Se já estiver na cesta, aumentará a quantidade em um. Vamos voltar ao nosso método dentro daqui. Antes de empurrar nossa pizza para a matriz, vamos primeiro verificar o conteúdo da matriz. Podemos criar uma constante chamada PizzaExists. Dentro daqui, vamos esperar this.cestas e, em seguida, fazer uso do método de busca JavaScript. Localizar não é nada específico para ver js. Na verdade, é um método de matriz JavaScript, que retorna um valor do primeiro item que corresponde à condição que estamos prestes a fornecer. O condicionamento é verificar se o nome da pizza e o tamanho já foi adicionado às cestas. Aqui dentro, nós dissemos que por função, queremos adicionar uma função de seta inline. Aqui estamos pesquisando através de nossa matriz e cada item que é encontrado é armazenado dentro desta variável peça com verificação indesejada. Se o pizza.name for igual ao item.name. Esta é a pizza lembrar que tinha sido passado para o nosso método. Nós também queremos acompanhar dois se o pizza.size é igual à nossa option.size também. Se o tamanho da pizza e também o nome da pizza, ambos são encontrados dentro da nossa cesta. Isso significa que isso vai ser verdade. Podemos montar uma declaração de “if”. Podemos dizer que se a pizza existe, então queremos aumentar a quantidade em um. Podemos fazer isso com PizzaExists.Quantity++. O que eu quero retornar fora da nossa função já que não precisamos fazer o método push logo abaixo. Salve este arquivo, e agora vamos para o navegador. Podemos tentar no final um pepperoni de 12 polegadas, um nove polegadas. Os limites são de 12 polegadas, e a quantidade foi aumentada para 2, 3 e 4. Vamos tentar por mais um. Digamos presunto e abacaxi. A quantidade agora está sendo aumentada com cada item que foi adicionado com isso agora no lugar, nossas cestas agora estão funcionando corretamente. Não parece ótimo em um momento. Mas nossos dados estão lá no lugar para o próximo vídeo. 9. Adicionando o carrinho de compras: Demos um grande passo em direção ao nosso cesto de compras funcional no último vídeo, empurrando nossos itens adicionados para um array. Agora podemos criar uma tabela para exibir os itens antigos por loop através desta matriz. Vamos voltar para os componentes da visualização de pontos do menu. Bem, eu vou adicionar esta cesta no final, logo acima da nossa div de fechamento para o menu. Role até os modelos, e lembre-se que criamos nossa seção de menu com a classe de menu. Vamos localizar o fim do nosso menu. No lugar da nossa cesta aqui, certifique-se de que ainda temos a div de fechamento no final do nosso invólucro principal. Vamos começar adicionando um comentário. Esta é para a nossa cesta de compras, nossa cesta de compras precisa de uma div, e vou dar a isto uma classe de cesta. Podemos usar isso no CSS muito em breve, agora vamos adicionar um título livre de nível no topo. Eu quero adicionar um til para ambos os lados, com o texto todas as cestas. Vamos começar a construir nossa tabela para todos os nossos dados cesta. A tabela vai ter o corpo da mesa e, em seguida, a nossa primeira linha da tabela. A linha da tabela precisa de alguns dados da tabela com os elementos TD e este primeiro pedaço de dados será para os botões de aumento e diminuição. Se você olhar para a versão final, este vai ser o mais e menos botões e também a quantidade no centro, vamos então adicionar um segundo pedaço de dados da tabela, que é para a nossa pizza, incluindo tamanho e, em seguida, finalmente o preço no final. O primeiro elemento vai incluir o nosso botão. Isso vai ter a pequena entidade h, que vai ser um e comercial, o hash, então o valor de 8,722 com um ponto-e-vírgula. Isso nos dará nosso símbolo negativo para deduzi-lo da quantidade. Você também pode adicionar uma classe, este vai ser o valor de btn underscore green. Mas o nosso CSS, vou duplicar isto. Isto é para o botão de adição, que é uma entidade pequena h do e comercial, o hash e, em seguida, o valor de 43. Entre aqui também queremos adicionar um elemento span, que é para a quantidade. Eu vou adicionar isso tudo em como um valor de 2. Debaixo do nosso td, podemos adicionar o nosso segundo conjunto de dados, que é para o nome da pizza e também o tamanho seguido por pedaço alfa de dados para esta linha, que é para o preço, e qualquer preço é bom. Voltaremos e tornaremos esta dinâmica muito em breve. Você pode dizer isso e ver como isso está olhando para cima nos projetos. Temos nossos botões, nossa quantidade, e também as informações sobre pizza, juntamente com o preço, definição de nossos modelos. Para a versão final, também precisamos adicionar este total de pedidos logo abaixo da nossa tabela. Eu só quero ouvir que podemos adicionar um p elementos com as tags de todo o total e dois pontos e, em seguida, podemos adicionar um botão para encontrar o local de ordem. Este botão também pode ter uma classe para combinar o resto com o nome da classe de btn green, salvar e atualizar. Só para terminar este vídeo, eu também vou adicionar um pouco de CSS para esta cesta, tanto quanto o menu do lado esquerdo. Vamos rolar para baixo em nossas tags de estilo, na parte inferior. Vamos compartilhar um estilo comum com o menu. Nós também podemos adicionar as cestas. Isto é uma aula. Isso nos dará a mesma cor de fundo e raio de borda que vemos aqui e também para torná-lo a largura total do espaço disponível. Vamos rolar para baixo até nossa consulta de mídia. O menu ocupou 65 por cento. Podemos adicionar à largura da cesta, vamos ocupar o resto do conteúdo, que é 35vw, e lá vamos nós. É assim que as nossas cestas de compras estão agora a ser apresentadas com alguns dados estáticos. Vamos agora passar para o próximo vídeo onde vamos percorrer os dados da nossa cesta e exibir dentro desta tabela. 10. Tornando o carrinho de compras dinâmico: Agora temos uma tabela de carrinho de compras na tela do menu mostrando alguns dados estáticos. Para tornar os nossos dados dinâmicos podemos percorrer o conteúdo da matriz de cestas, assim como fizemos com o menu do lado esquerdo. Já sabemos que o conjunto de cestas tem toda a informação que precisamos. Vamos adicionar isso para loop à nossa tabela, eu vou para os componentes do menu. Vamos rolar para cima até nossa tabela de cestas, e localizar a tag de abertura int tabela. Aqui dentro temos o corpo da mesa onde podemos adicionar o nosso v para um loop. O item que queremos percorrer é a cesta. Queremos armazenar cada item de cesta individual na variável item e também podemos adicionar como um segundo valor nossa posição de índice, que podemos usar como uma chave. Combinamos nossa chave dinâmica e configuramos isso para nosso índice. A próxima coisa a fazer é ir até nossos dados estáticos. A primeira peça é a quantidade do item, portanto, dentro das chaves duplas, podemos acessar nosso item e pegar a quantidade do nosso objeto. Rolando para baixo a próxima peça é a pizza dentro aqui e também o tamanho. Primeiro de tudo, vamos pegar o item.name e em seguida, como um segundo valor dentro de um segundo conjunto de chaves, você também pode adicionar o item.size. Abaixo disso, nós também temos o preço, então vamos mudar o 695 para ser o item.price e sua resposta para ser item, diga isso e agora obviamente navegador vamos adicionar alguns itens no lado direito. Verei que a quantidade foi aumentada com cada item de Júpiter um novo item é adicionado a uma nova linha agora estamos apenas perdendo o preço do final. Vamos dar uma olhada, temos o item.price. Vamos verificar o nosso método no fundo. Isso é apenas a partir da opção, então vamos mudar isso e agora de volta. Podemos tentar adicionar isso mais uma vez, e vemos o preço. No entanto, se aumentarmos a quantidade de qualquer um desses itens, vemos que a quantidade é aumentada, mas o preço total não é. Isso é algo que podemos facilmente corrigir, vamos produzir o preço. Vamos rolar para cima, podemos multiplicar o preço pelo item.quantity. Isso nos dará um preço total, então vemos que isso foi atualizado. Podemos adicionar mais um e o preço é atualizado a cada clique. Bom então agora, se dermos ao navegador uma atualização, queremos ocultar o texto e também o botão de ordem quando nenhuma pizza foi adicionada. Podemos ocultar nossas cestas usando renderização condicional e só exibir se a matriz cesta tem um comprimento maior do que zero. De volta à nossa cesta, que é a div circundante aqui, vou cercar esta mesa com uma segunda div onde podemos mostrar e esconder o seu conteúdo. Adicione uma div dentro aqui e, em seguida, podemos adicionar av se directiva para verificar se nossa cesta.length é maior do que zero. Esta div só irá mostrar se algum item foi adicionado à nossa matriz. Podemos cortar a etiqueta de fechamento e, em seguida, rolar para baixo até o final da nossa mesa. Na div de fechamento, logo após o nosso botão de ordem de lugar. Logo abaixo, podemos adicionar uma condição mais dentro de uma div separada. Podemos dizer v else para que o conteúdo dentro aqui será uma mensagem dentro dos elementos p. Vou tornar esta mensagem dinâmica e definir isto para uma variável chamada cesta de texto. Dentro do sub logo abaixo na propriedade data configurar o nosso texto cesta onde podemos exibir uma mensagem para o usuário do seu cesto está vazio. Salve isso, recarregue e há o nosso texto do seu cesto está vazio, usando renderização condicional e agora se adicionarmos um item à nossa matriz, isso agora está sendo removido e vemos os itens dentro da nossa cesta. Você pode estar se perguntando, por que nós configuramos nossa mensagem é um aqui como uma propriedade de data, em vez de simplesmente adicionar o texto dentro de nossos elementos p. Bem, isso é porque mais tarde depois de fazer o nosso pedido também obteremos esta mensagem para ser uma mensagem funky. Isso se tornará mais útil mais tarde, em seguida, adicionaremos pequenos métodos ao nosso carrinho de compras. Vamos ligar nossos botões de aumento e diminuição aqui dentro, juntamente com a remoção de itens da cesta também 11. Métodos de carrinho de compras: Agora temos uma cesta de compras exibindo as pizzas que o usuário seleciona. Há alguma funcionalidade extra e eu quero adicioná-lo para melhorar isso. Primeiro podemos obter os botões de mais e menos funcionando, para que possamos alterar a quantidade de cada item. Também relacionado a isso, quando a quantidade é reduzida a zero, queremos que este item seja removido da cesta. Vamos começar configurando os métodos para alterar a quantidade novamente no menu dos componentes. Precisamos começar adicionando alguns manipuladores de clique para esses dois botões. Vamos rolar para cima e dar uma olhada em nossos dois botões, que é esta seção apenas aqui. A primeira coisa que precisamos fazer é adicionar um manipulador de clique para o botão de menos. Então, podemos adicionar @click e definir isso igual a um método chamado diminuição da quantidade. Ao diminuir essa quantidade, também precisamos saber qual item estamos reduzindo para que possamos passar o item. O botão mais logo abaixo. Isto vai funcionar de forma semelhante. Isso leva um manipulador clique onde estamos indo para aumentar a quantidade. Também passando o item que queremos aumentar. Agora vamos rolar para baixo para o nosso script onde podemos criar nossos métodos. Então vamos dar uma olhada para isso. Logo abaixo dos nossos dados, localize o fim do nosso método de adicionar à cesta, que é ela. O primeiro eu vou adicionar IncrecreeQuantity, que vamos receber o item passado para ele. Aumentar o item é bastante simples. Tudo o que queremos fazer é selecionar o item.quantity e aumentar o valor em um com mais, mais. Vou copiar isso em uma vírgula onde você pode configurar a diminuição da quantidade. Tudo o que precisamos fazer para isso é mudar para negativo, e então estamos prontos para ir. Salve e depois para o navegador. Vamos adicionar alguns itens dentro de um aqui. Então, antes de tudo, temos um pepperoni. Podemos aumentar isso e a quantidade é aumentada juntamente com o preço. Vamos tentar deduzir isso e, em seguida, tomar este zero. Se continuarmos, teremos um valor negativo. Claro que isso não é algo que queremos. Então, podemos corrigir isso criando um método para remover o item quando a quantidade é zero. Então, dirija-se aos nossos métodos. Vou criar um novo método aqui dentro chamado RemoveFromBasket. Isso também vai levar no item que você deseja remover. Podemos usar o método de splice JavaScript para remover o item de nossa matriz. Podemos selecionar este.basket, que é a nossa matriz. Podemos chamar o método de splice JavaScript. Dentro dos parênteses, podemos adicionar dois parâmetros. A primeira é a posição de índice do item que queremos remover. Então podemos pegar isso com this.Baskets.IndexOf onde vamos passar em nosso item. Então isso vai encontrar a posição de índice do nosso item na matriz. O segundo parâmetro é o número de itens que queremos remover. Só queremos remover um. Para estes métodos de trabalho. Primeiro, precisamos chamá-lo quando a quantidade do item é zero. Sob este pode ser adicionado na necessidade de diminuir o método de quantidade. Vamos descer. Podemos definir para comprar se declaração para verificar se o item.quantity é igual a zero. Se for, queremos chamar o nosso método de remoção da cesta, que leva no item individual. Dê isso para salvar ao navegador e podemos adicionar alguns itens. Comece removendo o pepperoni, o presunto e o abacaxi. Tudo isso agora está funcionando bem. Ainda temos o lugar todo o botão para o porquê do grupo dois, que está em baixo na parte inferior. Mas podemos analisar isso mais tarde quando começarmos a trabalhar com o Firebase e os armazenamentos de dados. 12. Estruturando a seção de administrador: Bem-vindo de volta, o componente Admin vai ser uma grande parte deste aplicativo com um pouco de funcionalidade para trabalhar através. Para começar, protegemos a página com o formulário de login, como podemos ver aqui na versão final. Somente usuários autorizados podem ver a seção de administração. Se fizermos login, o resto do administrador, em seguida, torna-se visível. No topo temos o usuário conectado atual e também um logotipo inferior, seguido por uma nova seção de pizza, e também seus próprios componentes para permitir que o usuário conectado para adicionar novas pizzas ao menu, e abaixo podemos ver todos os itens que são atualmente no menu, e novamente, podemos remover itens do nosso menu e também um banco de dados para. Na parte inferior, temos uma lista de pedidos atuais, e estes também podem ser excluídos quando concluídos. Começamos novamente a minha criação de seu próprio componente chamado Admin W, e então podemos adicionar alguma estrutura básica. Sobre a nossa barra lateral para os componentes, o w. não tripulado aqui dentro, podemos adicionar nossos modelos onde vamos adicionar uma div como um wrapper com a classe de admin. Neste invólucro de chamada. Este será o wrapper principal para o nosso administrador. Isto vai ter dentro livre diferentes divs. O primeiro vai ser para o usuário atual, este vai ser seus próprios componentes. Vamos ter o invólucro do menu e, em seguida, na parte inferior, o invólucro de pedidos. Vamos adicionar esses divs agora. O primeiro vai ser uma div com a classe de wrapper de usuário atual. Depois disso, criará uma nova div, que também terá a classe de wrapper de menu, e o último será o wrapper de ordens, que se sentará na parte inferior. Precisamos adicionar nosso script logo abaixo disso, damos aos nossos componentes um nome. O padrão de exportação. Vamos adicionar o nome do componente, e vamos chamar o meu, o administrador. Salve este arquivo, e podemos ver isso dentro do navegador. Podemos adicionar isso no app w. Primeiro de tudo, podemos importar isso. Vou chamar este administrador, e isso é a partir do caminho do arquivo de componentes barra ponto, e depois o administrador. Nós também precisamos registrar esses componentes para baixo na instância view. Isso está disponível para uso dentro dos modelos. Vá até os modelos. Não precisamos mais deste cardápio aqui dentro. Vou mudar isso para ser administrador. Voltar para o administrador, modelos. Bem no topo temos este wrapper de usuário atual, que eu vou voltar mais tarde quando tivermos usuários registrados. Por enquanto, podemos descer para o wrapper de menu logo abaixo e criar nossa tabela. Isso nos dá um título de nível três com o título de Menu. Abaixo disso, podemos construir nossa mesa. Vamos adicionar a cabeça da mesa no topo com a primeira linha da tabela. Esta linha da tabela vai ter dois títulos. Se formos para a versão final, esses dois títulos serão para o item e também o texto off remove do item. Podemos adicioná-los, dentro das tags TH, o item, e logo abaixo disso, também podemos adicionar remover do menu. Abaixo da cabeça da mesa. Podemos então adicionar o corpo da mesa em uma fileira, e isso vai ser para o nosso nome Pizza e também o potencial para remover. A primeira célula dentro dos dados da tabela será para o nome da pizza. Vou colocar Margarita aqui dentro. Isto será lido a partir de um banco de dados mais tarde. Mas, por enquanto, podemos estudar o valor codificado seguido por um botão. Este botão será remover o item de menu do banco de dados. Alguém dê a este tipo de botão uma classe de btn_reds e, em seguida, para a cruz, usamos o código HTML, que é o tempo comercial e, em seguida, o ponto-e-vírgula. Salve este arquivo e, em seguida, sobre o navegador, temos um menu componentes, mas não usado mais no aplicativo. Selecione apenas comentar isso. Instância de exibição enquanto. Podemos também comentar o impulso. Agora, estou vendo uma tabela muito básica com nossos itens de menu na parte inferior. A tabela está agora no lugar, e vamos voltar a isso mais tarde para percorrer todos os nossos itens de menu, assim como fizemos dentro dos componentes do menu. Eu vou vê-lo agora no próximo vídeo onde vamos ficar com nossos componentes de administração e começar a trabalhar com os pedidos atuais. 13. Listando os pedidos atuais: Podemos olhar para a versão final do nos componentes de administração. No último vídeo. Criamos a tabela a partir de sua seção de menu e adicionamos em um item de amostra. Neste vídeo, vamos passar para a próxima div, que é para as ordens atuais. Esta também vai ser uma mesa dois onde vamos ter um título no topo. Nós vamos ter um título de tabela com o item, tamanho, quantidade e preço, e eu vou construir nossos pedidos logo abaixo e também com o botão para remover cada item. Agora estamos criando muitos componentes, e coisas como tabelas. Com dados estáticos não é a coisa mais emocionante a se fazer, mas fique com ele, é uma boa prática e chegaremos à seção de banco de dados muito em breve. Então, volte para os componentes de administração, que é o admin.view. Agora eu quero mover para baixo para este wrapper de ordens, vamos apenas mudar isso, e então dentro daqui podemos construir nosso cabeçalho de nível três, com o título de ordens correntes. Então, dentro dos colchetes, estamos indo para hard-code em um valor. Então vamos salvar 5 pedidos. Então, logo abaixo disso, podemos criar nossa tabela. A tabela começará com os cabeçalhos de mesa, que serão os títulos do item, tamanho, quantidade e preço. Vamos adicionar estes em sua própria linha, e, em seguida, cada um vai dentro de uma tabela elementos título. O primeiro é para um item. Vamos duplicar isso mais três vezes. O próximo é para o tamanho, o terceiro para a quantidade, e o último será para o preço. Rolando para baixo abaixo da nossa seção de cabeçalho, vamos adicionar o corpo da tabela, com os elementos tbody. Ninho dentro da nossa primeira fileira, e esta primeira fileira vai ser para o nosso outro número. Vou adicionar uma classe de ordem e chama-se número. É a seção do número do pedido, dando uma olhada no site final vai ser esta linha que vemos aqui. Você terá um número de pedido e também um botão para remover isso do banco de dados. A maioria vai fazer isso em uma célula dois, fazendo isso abranger todas as quatro colunas. Então aqui dentro podemos adicionar um título de tabela. Podemos fazer a extensão toda para nós mesmos, com extensão transversal para ser igual a quatro. número do nosso pedido, vou adicionar as etiquetas fortes. Então número do pedido. Eu vou definir qualquer valor dentro aqui seguido por nosso botão que vai tomar no tipo de botão, e também uma classe para o nosso CSS, fazer este vermelho. Temos a classe de botão de btn_red. Como o valor, podemos adicionar uma entidade HTML de marcas comercial, vezes e, em seguida, um ponto e vírgula. Salve isso e agora queremos ver nossos projetos e role para baixo. Temos o nosso; título da tabela, o número do pedido, e também o botão. A próxima coisa a fazer é adicionar uma nova linha, que vai exibir o nome da pizza, tais como; vegetariano, o tamanho, a quantidade, e também o preço. Uma nova linha aqui dentro. A primeira parte dos dados da tabela é para o nome. Vou adicionar margarita. A segunda é para o tamanho da pizza. O terceiro é para a quantidade, estes estão muito lá dentro. O quarto vai ser pelo preço. Poupe e vamos verificar isso. Bom. Agora temos nosso conteúdo de tabela lá, e agora podemos adicionar um pouco de estilo dentro da seção CSS, dentro do admin para visualizar componentes. Role para baixo abaixo dos scripts. Você pode ter os elementos de estilo. Isso também pode ser definido para esses componentes, onde vamos começar direcionando o admin_wrapper, que é o wrapper principal. Tudo o que eu vou fazer é adicionar alguma margem de 10 pixels aninhados dentro. Vou segmentar nossas seções livres; então a primeira foi current_user_wrapper, a segunda foi o orders_wrapper, e a terceira é para o menu_wrapper. Podemos direcionar todas essas três seções juntas para manter o estilo consistente. Alguma margem para dar algum espaço fora da div, 10 pixels na parte superior e inferior e zero na esquerda e direita. Algum preenchimento dentro das divs de 10 pixels. Uma borda em torno de cada um com uma linha sólida de um pixel, e a cor a ser f79e38. Ao lado de nossos elementos de tabela, podemos definir o text-align para estar à esquerda. Podemos fazer a largura. Eu quero definir isso para ser 70vw, para ser 70 por cento da largura do ponto de vista. Em seguida, podemos direcionar a ação do número do pedido, e o título da tabela, para dar a isso uma cor de fundo, que será cinza claro. Este é o valor de ddd. Finalmente, mais uma vez o número do pedido, mas desta vez vamos apontar o botão. Então, o botão número do pedido, que é o único para remover o item do banco de dados. Só vou adicionar uma margem de zero no topo e no fundo. Adicione 10 pixels à esquerda e à direita. Dê isso um salvamento e sobre o navegador. Recarregar. Esta é a seção atual do pedido concluída por enquanto. Se o seu é assim, parabéns. Você está pronto para seguir em frente para adicionar novos itens de menu, e vamos adicionar isso no próximo vídeo. 14. Adicionando um novo componente de pizza: Mais no menu apenas versão concluída, estes não são nova seção de pizza, é basicamente forma para adicionar um novo item ao banco de dados. Vou criar uma seção em seus próprios componentes, chamada NewPizza.vue. Você poderia argumentar que isso poderia ir no arquivo de administração 2, o que também seria bom. No entanto, é um pouco de código HTML. Então, o componente de administração torná-lo um pouco inchado. Como de costume, vamos para a pasta de componentes, e podemos criar nossos novos componentes, aqui dentro. Então esta vai ser a extensão NewPizza.vue. Dentro daqui, podemos adicionar nosso modelo [inaudível] e podemos ter alguma estrutura básica para a nossa forma. Então, o formulário que tem as tags de abertura e fechamento dentro do título livre de nível. 15. Associações de entrada de formulário: Com o novo formulário de pizza já, precisamos de uma maneira de adicionar os dados dos usuários e armazená-los para nossa incidência vista. Podemos facilmente fazer isso usando V-model, que cria ligação de dados bidirecional, e isso significa que os valores das entradas de formulário vai faturar para a propriedade de dados até volumoso mantido em sincronia. Vamos começar criando um novo objetos de pizza dentro da seção de dados. Para o nosso novo arquivo de menu de pizza, eu não iria até a nossa seção de script, onde vamos adicionar a propriedade de dados logo após o nome do componente. Podemos devolver nossos objetos onde vamos adicionar nossos novos objetos de pizza. Este novo objeto de pizza formará uma estrutura de como nossa pizza será salva no banco de dados. Este objeto seguirá a mesma estrutura que o que usamos nos componentes do menu W. Vamos para o nosso menu.view. Podemos descer para obter itens de menu dentro de nossos scripts. Vou copiar todo o conteúdo de um desses objetos, então não precisamos das chaves. Vamos pegar a etiqueta de fechamento da matriz até o nome da pizza. Podemos copiar isto e depois isto dentro dos nossos novos objectos de pizza. A idéia aqui é usar isso como um modelo. Vou adicionar EG no início do nome e também EG no início da descrição. A razão para isso é devido à ligação de dados bidirecional. Nós mencionamos ligação de dados bidirecional antes e como esses dados serão vinculados às nossas entradas de formulário. Minha lista de links é bem formada, é na verdade, vamos ver dentro dessas entradas de formulário será EG margarita e também EG seguido por uma descrição que irá solicitar ao usuário o que está digitando. Então, uma vez que esta é de duas maneiras, quando o usuário digita qualquer coisa nessas entradas, ele irá então substituir os valores dentro deste objeto. Podemos então ir em frente e empurrar esta nova pizza no banco de dados. Vamos primeiro configurar isso usando V-model. Podemos usar este formulário campos de entrada loop dentro do nosso formulário. Vamos subir. Começaremos com o nome. Podemos adicionar modelo V. Então combinamos isso com nossos novos objetos de pizza. Em seguida, o nome do campo, Eu vou copiar esta seção e, em seguida, ir para baixo para a descrição. Dentro da área de texto, vamos colar isso, e assumindo nova pizza.description. Aqui eu também vou definir a subida inicial para ser um valor de cinco. Quando X tem a opção uma seção e no tamanho. Se entrarmos nas entradas, podemos colar isso. Mas desta vez queremos acessar a nova pizza. Queremos acessar as opções, que é uma matriz. O primeiro valor de matriz é 0, e podemos acessar o tamanho. Próximo declive na opção 1, temos o preço. Tantos pizza, as opções ainda no número índice de zero e desta vez queremos acessar o preço. Para a opção 2, começamos com o tamanho. Isto é opções, mas este é o primeiro item na matriz. Basta confirmar se descermos dentro da nossa matriz, o primeiro item é a posição 0 e o segundo item é a posição 1. Posição 1. Tamanho. Então, para o preço, opções nascidas e, em seguida, preço. Serviço, novos componentes de pizza e podemos verificar o silêncio no navegador. Ele vai ver o texto de EG margarita, a descrição e também o tamanho e os preços que aparecem nos campos de formulário para. Tudo isso parece bem. Para verificar a ligação está funcionando corretamente, podemos adicionar um ouvinte clique para o botão para baixo na parte inferior, que vai acionar um método. Até o nosso fundo, podemos adicionar um listener clique sem clique e configurar um método que eu vou chamar para baixo para todos instância vista. Após a propriedade de dados, aqui podemos configurar todos os métodos. O nome do método era estranho. Dentro daqui por enquanto podemos executar um alerta, apenas com a mensagem de método acionado e assim podemos ver os resultados do nosso objeto sendo atualizado em tempo real. Se entrarmos em todas as formas, também podemos produzir a nossa nova pizza dentro das chaves duplas com este ponto nova pizza. Para o navegador. Agora podemos ver nosso objeto de pizza inicial na parte inferior. Podemos então fazer quaisquer alterações aqui dentro, e vê-las refletidas imediatamente dentro de nossos dados. Também podemos obter a descrição. Podemos obter o tamanho. Vamos tentar atualizar ambos no tamanho correspondente e preço também muda. Bom, o que está agora tudo no lugar? Vamos agora passar para a próxima seção onde começaremos a trabalhar com nosso banco de dados Firebase. 16. Configurando nosso banco de dados do Firebase: Com os dados do NewPizza agora sendo capturados com sucesso, agora precisamos configurar nosso banco de dados para armazenar essas informações. Vou usar o Firebase para o back-end do projeto, e em particular o banco de dados mais recente do Firestall. Também em breve faremos uso de um pacote chamado Vivax fire, para manter os dados do nosso projeto em sincronia com este banco de dados também. Também mais tarde no curso, também podemos usar o recurso de autenticação do Firebase, para garantir que apenas usuários de administrador de login possam acessar determinados dados. Vamos começar a cabeça para firebase.google.com. Se você não tiver uma conta, você precisará se inscrever e, em seguida, acessar o console. Dentro do console, agora podemos criar um novo projeto. Vou adicionar um novo projeto aqui, e chamar o meu Pizza Planet. Clique em “Continuar”. No momento, não vou ativar o Google Analytics, então vou criar um novo projeto e dar a isso alguns momentos para continuar e criar. Uma vez feito, clique em “Continuar” e você deve ser levado para uma página semelhante a esta. Vamos usar o Cloud Firestore como nosso back-end. Você pode clicar nesta seção aqui para criar o banco de dados, ou clicar na opção no menu. Isso vai nos fazer começar com um novo banco de dados do nosso projeto Pizza Planet. Clique em “Criar”. Antes de criarmos isso, temos duas opções. Temos o modo de produção, onde os dados são mais seguros, mas podemos começar no modo de teste, o que permitirá que nosso banco de dados seja mantido aberto para leitura e gravação de dados. Voltaremos a isto mais tarde e mudaremos as nossas regras de segurança. Em seguida, clique em “Avançar” dentro do modo de teste. Podemos concluir isso e finalizar nosso armazenamento de dados. Uma vez que isso é feito, em seguida, levá-lo para a nossa seção de base de dados, e muito em breve é onde todos os nossos dados em nosso banco de dados aparecerão. Também podemos adicionar manualmente uma coleção, se quisermos. Uma coleção é um grupo de dados, que serão nossos pedidos e também nosso menu. Vou clicar em “Cancelar”, já que vamos enviar dados do nosso projeto em vez de adicionar isso manualmente. Para adicionar este banco de dados ao nosso projeto, precisamos acessar nossas configurações do Firebase, que pegamos na barra lateral e, em seguida, visão geral do projeto. É claro que estamos usando o Firebase em um projeto web, então clique no ícone da Web aqui. Podemos então registrar nosso aplicativo. Quero chamar o meu Pizza Planet. Podemos nos registrar. Isso nos dará acesso às nossas configurações, que precisam ser adicionadas ao nosso projeto. Vou copiar todas as preocupações da opção de configuração, então a chave de API, até o ID do aplicativo. Vamos pegar isso, ir para o projeto. Dentro do terminal vamos começar fechando isso e instalando no Firebase como um pacote NPM. Podemos fazer isso com o NPM I, no nome do pacote Firebase. Enquanto isso está configurando, podemos então criar um novo arquivo na raiz de nossa fonte. Vamos entrar na fonte, dentro da barra lateral, criar um novo arquivo. Isso pode ser chamado de firebase.js, e ele vai estar dentro deste arquivo onde podemos adicionar nossa configuração. Vamos começar importando nosso pacote Firebase do firebase/app. Como uma segunda importação, também vamos importar nosso firestore, que está disponível no firebase/firestore. Se você já usou o Firebase no passado e simplesmente importou o Firebase, as versões mais modernas do Firebase permitem que você selecione vários pacotes, como o firestore, também serão mais tarde importando o autenticação. Todos eles se dividem em módulos separados. Vamos tornar esses tamanhos de arquivo menores. Podemos então configurar nossas constantes, para a nossa opção de configuração. Este vai ser um objeto, onde podemos colar nessas configurações, que acabamos de pegar do Firebase. Logo depois disso, podemos pegar nossa variável Firebase, e depois usar um método que é chamado initialize App. Para inicializar nosso aplicativo, também precisamos passar nas opções de configuração. Depois disso, também podemos criar uma segunda constante, que é chamada DB, e isso será um atalho para nossa firebase.firestore. Com a necessidade de criar uma referência de banco de dados, vou exportar essa referência, que possamos usá-la em outro lugar. Podemos exportar uma constante chamada, dbMenureF. Isto vai ser uma referência ou um atalho para toda a coleção de menus dentro de todos os bancos de dados. O atalho vai ser um vinculado ao nosso banco de dados, e depois passar o nome da coleção, que vai ser menu. Esta pasta de menu será criada para nós ao adicionar a primeira pizza, se ela ainda não existir. Portanto, não precisamos ir para o Firebase e adicionar manualmente isso dentro do console. Agora tudo o que precisamos fazer dentro de qualquer componente, é importar este dbMenureF. Em seguida, podemos chamar qualquer um dos métodos Firebase que precisamos, para salvar o item de menu, remover, atualizar ou excluir. Salve este arquivo e vamos voltar para o arquivo NewPizza.vue. Precisamos importar essa referência dentro de nossos scripts. Eu vou fazer isso dentro das chaves, já que esta é uma exportação nomeada. Então DBMenuref. Podemos importar isso a partir do caminho do arquivo de.. /, e nosso arquivo firebase. No momento, se formos ao nosso projeto, quando clicamos no botão “Adicionar”, acionamos um alerta dentro do navegador. Mas em vez disso, agora podemos usar essa referência de menu e usar um método Firebase chamado art para empurrar nosso NewPizza para Firebase. Vamos rolar para baixo e substituir nossos alertas, acessando o DBMenureF. Acesse o método adicionar Firebase, onde estamos indo para empurrar this.NewPizza. Precisamos reiniciar nosso servidor, com serviço de execução NPM. Para o administrador dentro do nosso projeto, e mude o nome. Vou adicionar um Pepperoni. Também podemos alterar a descrição, mussarela e pepperoni. Vamos também alterar os preços, então sete, e vamos fazer isso 11. Clique no botão “Adicionar”, sobre o nosso banco de dados e dirige-se para o link do banco de dados. Agora vemos que nossa coleção de menus está sendo criada automaticamente para nós. Aqui dentro temos um documento. Esta é a identificação do documento e, em seguida, todas as informações do nosso formulário. Temos nossas duas opções como um array, com o nome e descrição atualizados. Espero que tudo isso tenha funcionado para você também. Caso contrário, volte e verifique o código, geralmente é algo tão simples quanto um erro de digitação. Se você pode ver isso no banco de dados, no entanto, você está pronto para passar para o próximo vídeo. 17. Adicionando o componente de login: A seção de administração do aplicativo precisa estar na área, que somente usuários registrados podem acessar. Não queremos que nenhum visitante seja capaz de adicionar ou remover pizzas do nosso menu ou acessar qualquer um dos pedidos atuais. Portanto, precisamos adicionar autenticação de uso ao nosso aplicativo, e podemos fazer isso usando os projetos existentes do Firebase. Primeiro, precisamos adicionar um componente de login, que podemos colocar dentro do Admin, e vamos fazer isso com um novo componente chamado Login.View. Vá para os Componentes, crie Login.View, onde podemos começar a construir nossos modelos da maneira usual. Vou adicionar um invólucro. Vamos adicionar uma div com a classe de login_wrapper. Aninhados dentro, podemos ter um formulário. Este formulário vai ter duas seções. Vamos fazer login usando a combinação de e-mail e senha, então vamos criar um wrapper div antes de tudo, para o e-mail. O e-mail precisa de uma etiqueta, então isso é para o e-mail, e então aqui dentro podemos ter o texto do endereço de e-mail. Depois, precisamos de nossas entradas de formulário. O tipo de entrada vai ser para e-mail, o id de e-mail também, e, em seguida, o valor de espaço reservado, que será inserir e-mail. Após esta seção, podemos então adicionar uma segunda div ainda dentro do formulário. Este vai ser para a nossa senha. O rótulo para senha, o texto da senha, a entrada vai ter o tipo de senha junto com o id, e mais uma vez, o espaço reservado da senha. Para terminar este formulário, só precisamos adicionar um botão antes da tag de fechamento do formulário, e este vai ser o tipo de botão, a classe de btn_green, e então o texto de login. Este componente agora precisa ser importado e registrado para que possamos usá-lo no arquivo admin. Então eu vou para o Admin.View, para baixo para o nosso script onde podemos importar nossos componentes de login, o caminho do arquivo. Isso também está no arquivo de componentes para que o caminho do arquivo seja simplesmente. /Login. Em seguida, registre nossos componentes e, em seguida, até nossos modelos onde podemos adicionar isso em. Vou adicionar isso perto da parte inferior, então logo acima da div de fechamento do nosso wrapper, vamos adicionar nossos componentes de login. Salve este arquivo e, em seguida, vá para o Admin no navegador onde vemos nosso novo formulário na parte inferior para o e-mail e senha. A posição deste componente não é realmente importante nesta fase, já que mais tarde no curso, quando temos acesso aos estados logados do usuário, nós renderizaremos condicionalmente esses componentes, então este é o único coisa que o usuário vê na página. No próximo vídeo, voltaremos ao Firebase e começaremos a trabalhar com nossa autenticação de usuário. 18. Habilitando a autenticação do Firebase: No último vídeo, adicionamos um formulário de login de usuário que temos na parte inferior do nosso administrador. Isso será usado para passar dados para o Firebase e verificar se o usuário tem permissão para acessar esta tela de administração. Firebase facilita a autenticação de suplementos para acessar o Firebase console. Vemos a opção de autenticação no menu do lado esquerdo. Podemos então selecionar um método de inscrição onde podemos configurar a autenticação usando vários provedores. Podemos fazer uso de mídias sociais como Facebook ou Twitter ou podemos usar uma combinação de e-mail e senha, que eu vou clicar e, em seguida, ativar. Uma vez feito isso, clique em Salvar. Você verá o status habilitado apenas no meio aqui. Clique em um usuário e agora podemos adicionar um usuário ao Firebase. Clique em “Adicionar Usuário” onde podemos adicionar um e-mail e também uma senha. Vou adicionar testá-los em e, em seguida, Adicionar usuário. Claro, uma senha mais forte é necessária se usar isso em produção. Há também uma maneira de registrar usuários de dentro do aplicativo também e ele mostra isso na documentação se você estiver interessado. Existem vários métodos, como assinar com e-mail e senha. Mas isso é mais adequado para aplicativos onde usuários públicos podem se registrar em vez de nosso caso de uso, onde simplesmente temos um administrador que pode fazer login no back-end. Agora temos um usuário registrado, precisamos configurar nossa autenticação em nossa configuração do Firebase, então volte para o nosso projeto e, em seguida, o arquivo Firebase.js. Podemos então importar nosso módulo off do Firebase assim como fizemos com o cinco estrelas logo acima. Podemos selecionar a autenticação barra barra do Firebase e, na parte inferior, podemos criar uma referência ao nosso serviço de autenticação do Firebase. Vou exportar isso como uma constante, então ele está disponível em outros arquivos. Vou chamar essa constante por uma autenticação base e definir isso igual a Firebase e acessar o método auth. Dentro dos arquivos de autenticação, assim como fizemos com a referência do menu, podemos acessar nossos métodos de autenticação usando a autenticação do Firebase como basicamente um atalho. Podemos então ir para os componentes de vista de login e agora podemos importar esta referência de auth do arquivo de configuração. Vou estragar os nossos modelos. Vamos criar nossos roteiros. Esta é uma exportação nomeada, então eu vou importar isso usando as chaves, então o nome era Firebase auth e isso é do caminho do arquivo, que é ponto barra e, em seguida, Firebase e nós vamos fazer uso deste para criar a funcionalidade de início de sessão e de saída. Vamos começar com o login, adicionando um manipulador de cliques ao nosso botão de login ajustável. Em apenas esta linha aqui podemos criar um manipulador de cliques uso dot previne para evitar o comportamento padrão de uma atualização do navegador configurar isso para ser igual a um método chamado login e este método que agora podemos criar baixo dentro do nosso script. Primeiro de tudo, dentro da nossa exportação, podemos adicionar o nome do nosso componente que é login. Também precisamos configurar nossos métodos e o único no momento é entrar. Dentro daqui podemos acessar todos os métodos de autenticação disponíveis que podemos acessar usando a autenticação do Firebase e é isso que começaremos a ver no próximo vídeo. 19. Entrando e saindo: Ativamos nossa autenticação com e-mail e senha no último vídeo. Isso significa que precisamos de uma maneira de capturar o e-mail e senha que o usuário entra, e podemos facilmente fazer isso usando V-model. O primeiro passo, é adicionar e-mail e senha como uma propriedade de dados. Então vamos fazer isso dentro de nossa exportação, configurar os dados, e dentro vamos retornar nossos dados como um objeto sem uma vírgula usada após os dados. Podemos configurar o e-mail inicialmente para ser uma string vazia e também o mesmo com a senha. Podemos então usar V-model para sincronizar isso com nossos dados de formulário. Vamos primeiro entrar no nosso e-mail. Dentro da entrada de formulário, podemos adicionar V-model e definir isso igual à nossa propriedade de dados que vai ser e-mail. Faremos o mesmo. Logo abaixo dentro da entrada de senha, V-model e desta vez a propriedade de dados vai ser a senha. Podemos então rolar para baixo e terminar o método de login, que começamos no último vídeo. Primeiro de tudo, vou marcar isso como uma função assíncrona. Podemos usar assíncrono aguarde. Nós também podemos adicionar tentar e pegar. Podemos adicionar manipulação de erros, passando o erro que vamos lidar com em apenas um momento. Vamos começar na seção tente onde vamos entrar e armazenar os dados de usuários retornados. Primeiro de tudo, vamos pegar nossa referência à nossa autenticação firebase. Portanto, você pode acessar todos os métodos disponíveis que precisamos. O método que vamos usar é um método Firebase chamado login com e-mail e senha. Dentro deste método, simplesmente passamos nosso e-mail e senha. Temos isso disponível na instância vista. Todos nós podemos acessar este.email e isso.senha. Também podemos esperar que os dados voltem. Isto é tudo o que precisamos fazer para a seção de tentativa, vamos até a área de captura para coletar quaisquer erros. Vamos acessar o objeto de erro e armazenar os dados dentro de todas as variáveis de modo. O primeiro vai ser o código de erro que está disponível a partir de error.code. A segunda constante será para a mensagem de erro, e a mensagem de erro está disponível a partir de error.message. Depois disso, vamos exibir alguns alertas, que serão para as mensagens de erro. Para começar, vou verificar se o usuário inseriu uma senha incorreta. Podemos fazer isto verificando se o código de erro vai ser igual a uma string que é auth/ password errada. Se for, podemos criar um erro personalizado. Então vamos criar um alerta com a tela de senha errada. Se a senha estiver correta, podemos então criar uma seção L que vai pegar todas as mensagens de erro, então vamos adicionar um segundo alerta com a mensagem de erro ou com o navegador, agora podemos fazer isso um teste. Role para baixo até a parte inferior do administrador e vamos abrir o console. Podemos começar adicionando uma senha incorreta. Vamos adicionar test @test, na senha como test, entrar. Vamos receber a mensagem de erro informando que nenhum usuário foi encontrado. Vamos tentar o correto, que adicionamos dentro de um Firebase e uma senha incorreta, entrar. Nós recebemos a mensagem de senha errada que nós configuramos. Vamos tentar a senha correta. Então teste-os. Agora que usamos o e-mail e a senha corretos, não vemos nenhum erro. Mais tarde, este componente de login irá ocultar para revelar o administrador para que o usuário saiba que foi um sucesso, juntamente com a exibição do e-mail do usuário conectado e também um botão de inscrição. Este método de inscrição é um pouco mais simples e isso irá dentro do componente admin. Vamos adicionar ao admin.view. Olhe para o topo do nosso modelo, já criamos uma div para a área de usuário, que é o wrapper do usuário atual. Dentro dele vai ficar assim. Se abrirmos isso, crie o span, que será o texto de logado como, seguido de dois-pontos. Abaixo há um botão com o texto de sair. Isso também precisa de alguns atributos dentro da tag de abertura. Este é um tipo de botão, uma classe, BTN vermelho. Podemos adicionar um manipulador de clique onde estamos indo para evitar o comportamento padrão. O método que estamos prestes a criar será sair. Agora precisamos acessar um novo método Firebase/ rolar para baixo até o nosso script onde podemos importar e vamos desligar módulo ou impulso dentro das chaves, uma vez que esta foi uma exportação nomeada. Podemos importar Firebase fora e este caminho de arquivo desta vez é../e, em seguida, Firebase. Depois de nossos componentes, podemos então criar nosso método. Então configure nossos métodos e, em seguida, dentro aqui, podemos criar uma função assíncrona chamada sair. Configurar uma seção try e catch. Passando o erro. Inscrever-se no Firebase é bastante simples. Tudo o que vamos fazer é esperar, Firebase desligada. O método que precisamos acessar é sair. É tudo o que precisamos fazer dentro da seção de tentativas. Podemos então capturar quaisquer erros alertando uma mensagem para o usuário. Vou adicionar isso dentro do [inaudível] Então você pode inserir uma variável. Erro, sair seguido de uma vírgula e inserir nossa variável de erro. Vamos tentar isso no navegador. Vamos recarregar e limpar o console. Vamos tentar todas as nossas mensagens de erro. Primeiro de tudo, um e-mail e senha errados. Nós recebemos a mensagem do usuário pode ter sido excluído. Podemos adicionar o e-mail correto e senha incorreta, e recebemos a mensagem incorreta. Vamos tentar a senha correta, entrar, não recebemos mensagens de erro. Desloque-se para cima. Agora que estamos logados, clique em sair. Não vemos nenhuma mensagem de erro. Então isso parece estar funcionando bem. Mais tarde no curso, adicionaremos alguns comentários ao usuário, mostraremos um novo endereço de e-mail quando estiver logado, mas por enquanto tudo isso parece estar funcionando bem. 20. Componentes finais: Estamos fazendo um bom progresso com esta aplicação até agora. Antes de passarmos para a próxima seção, que será olhar para o roteamento, eu só quero primeiro adicionar os componentes restantes necessários para este projeto. Eles serão componentes bastante simples, como uma página Sobre Nós e Fale Conosco. Mas eles serão úteis na próxima seção onde veremos como podemos usar roteamento para alternar entre eles. Um dos componentes finais que precisamos é o About Us componentes então vamos abrir a barra lateral e criar um novo arquivo chamado about.view. Isso vai ser bem simples onde nós criamos um templates, mas agora eu vou adicionar uma div vazia. Também criar nossa seção de script e o nome do componente que vai ser sobre salvar isso, e de volta para os componentes que podemos criar nosso segundo arquivo, que vai ser contato.View para a página Fale Conosco. Crie nosso modelo aqui dentro, então isso vai ter uma div com a classe de contact_ wrapper, um nível para o título de Contacto. Depois disso, vamos adicionar nosso endereço para a seção de contato. No topo vamos adicionar o nome de Pizza Planet dentro das marcas fortes. Então podemos criar um endereço fictício separado por tags de quebra, adicioná-los em novas linhas. Vamos simplesmente inventar algo do endereço 1, Copiar e Colar isso em mais algumas vezes, e também um número de telefone e também fazer isso. Há sempre um segundo conjunto de etiquetas de endereço e vai ser apenas para o nosso e-mail. Dentro dessas tags fortes vamos adicionar o título do e-mail, seguido de uma tag break e, em seguida, um endereço de e-mail dentro dos elementos P. Agora podemos adicionar qualquer endereço de e-mail dentro aqui para entrar em contato em pizzaplanets.com. Uma tag de script, logo abaixo desta e única tag script precisa é um nome dos componentes, que é contato e, em seguida, podemos adicionar nossos estilos logo abaixo. Eu só vou adicionar alguns estilos básicos para o nosso wrapper de contato, que foram adicionados como nosso div circundante. Esta é uma classe, então os planos de fundo eu quero adicionar um valor hexadecimal de f1e6da, uma altura para os componentes de 100 por cento da altura da janela de exibição, eu vou aplicar por alguma margem e preenchimento, então 10 pixels e também o mesmo para o nosso acolchoamento. O próximo componente será para as informações de entrega, então isso é entrega. View. Começa com o modelo como de costume, uma div circundante, que vai ter a classe de info_block. Um título de Informações de entrega e eu vou adicionar os tildes em ambos os lados. Uma segunda div depois disso com a classe de conteúdo de bloco de informações. Só para que possamos mirar isso dentro do CSS. Podemos adicionar algum texto de amostra dentro do elemento P então eu vou digitar em lorem, pressione Tab para obter alguns dados de amostra. Depois disso, podemos adicionar uma imagem. Para a fonte da imagem, podemos pegar isso de nossa pasta de imagens. Isso está dentro de ativos/imagens e, em seguida, o nome de delivery.png, os textos alt da imagem de entrega. Então tudo o que precisamos fazer depois de dias é adicionar nosso script, que vai ter o nome de nossos componentes, que vai ser entrega. Os próximos dois componentes da história e guia de ordenação vão ser bastante semelhantes. Eu vou copiar todo o conteúdo deste arquivo, criar um novo arquivo e isso vai ser history.View, Colar no conteúdo. Tudo o que precisamos fazer aqui é mudar o título da história, a imagem é planets.png, o texto alt da imagem do planeta. Em seguida, o nome do componente do histórico, salve este e o último que precisamos criar é para o guia de ordenação, com base nos mesmos dados, e podemos fazer uso disso. O texto de como encomendar a fonte da imagem em vez de entrega vai ser order.png, o texto alt de toda a imagem e, finalmente, o título do guia de ordenação. Este é agora para os nossos componentes e a maior parte do projeto está agora configurada. Não precisamos registrar nenhum desses componentes porque vamos exibi-los usando roteamento na próxima seção. 21. Instalação e configuração do roteador: Bem-vindo de volta a esta nova seção. Aqui, vamos dar um mergulho no Vue Router. O Roteador Vue nos permitirá criar rotas, navegar para diferentes partes de nossa aplicação. No momento, sem o roteador, apenas adicionamos um componente em que estamos trabalhando no arquivo app.js. Podemos ver na tela, um roteador nos permitirá alternar entre componentes para diferentes URLs ou páginas. Este aplicativo é construído como um aplicativo de página única. Isso é bastante comum para projetos JavaScript. Usamos o webpack para agrupar todos os nossos componentes e dependências em um único arquivo de pacote principal. Isso significa que quando visitarmos nosso aplicativo pela primeira vez, solicitaremos esse pacote do servidor. O servidor normalmente retornará apenas a página de índice em todos os casos e, em seguida, JavaScript lida com a alternância entre as páginas. Todos os nossos componentes dentro do navegador sem tempo para fazer outra solicitação para o servidor. Daí o nome aplicações de página única. Isso resulta em nosso aplicativo trabalhando muito rápido, pois este JavaScript é muito mais rápido do que uma ida e volta para o servidor para buscar uma página quando precisamos dela. Para começar com o Vue Router, primeiro precisamos instalá-lo. Podemos fazer isso usando o link CDN, que está disponível no site router.vuejs.org. Se você seguir para a instalação, você pode pegar o link CDN a partir daqui, ou podemos instalar o módulo usando npm, e isso é o que vamos fazer agora. Nos projetos no Visual Studio Code, vá até o terminal. Vou instalar isso com o NPM i, e o nome do pacote do Vue Router. Uma vez que isso tenha terminado a instalação, podemos passar para o main.js, e começar a configurar isso. O arquivo está ajudando a criar e importar. Está puxando nosso módulo de nó. Então precisamos importar o Vue Router. e o nome do pacote era vue-router. Além disso, uma vez que usamos módulos ou arquivos separados que pacotes webpack juntos, podemos declarar que queremos usar este roteador em todos os nossos arquivos adicionando view.use. Dentro do view.use, em seguida, passando o nosso roteador de visão. Isso está disponível em todos os arquivos, que significa que não precisamos adicionar a instrução import na parte superior de cada arquivo. Em seguida, precisamos configurar a nova instância do Vue Router, que levará em um objeto. Logo abaixo disso, podemos configurar nossas constantes chamadas Router. Isso até ser uma nova instância do Vue Router. Objetos pessoais. Vamos adicionar a este objeto para toda esta seção, começando no próximo vídeo, onde vamos realmente configurar nossas rotas. Em seguida, podemos injetar nosso roteador na instância vista apenas soprar, adicionando neste nome constante do roteador. Dentro da nova instância de visualização, passando nosso roteador. Com isso agora em vigor, nosso roteador está configurado e pronto para adicionar algumas rotas para alternar entre componentes. Isto é o que vamos chegar no próximo vídeo. 22. Criando nossas rotas: Temos nosso roteador agora instalado. É hora de adicionar algumas rotas para nos permitir alternar entre páginas ou componentes chamando o arquivo main.js, que adicionamos nossa rota para instância no último vídeo. Podemos adicionar nossas rotas diretamente aqui dentro, ou para manter as coisas agradáveis e arrumadas. Vou configurar uma nova constante chamada rotas e criar uma nova matriz logo acima roteadores e matriz, que podemos adicionar um objeto, comer rotas. Dentro deste objeto, precisamos definir um caminho. Vamos começar criando nossos objetos. Podemos passar na propriedade do caminho. Em seguida, adicionamos o caminho para o qual você deseja navegar. A rota para casa é a barra para a frente. Ou, por exemplo, se adicionarmos menu barra, este será o nosso URLs que são como pizzaplanet.com/menu. Vamos começar com as rotas de casa. Então precisamos declarar quais componentes queremos renderizar quando o usuário visita a rota barra direta. Vou navegar até os componentes da casa. Também precisaremos importar este componente em apenas um momento. A segunda rota que vou adicionar é para o menu. Novamente, como eu string forward barra menu, que vai mapear para um componente, com o nome do meu novo. Então, no topo deste arquivo como sempre, podemos importar nossos módulos, todos os nossos componentes. Importar, o componente inicial. Isto é do nosso diretório de componentes, que é. /components/home. Este outro comando vai ser o nosso menu, os mesmos componentes/menu do caminho do arquivo. Agora temos nossas duas rotas configuradas quando X precisa, passá-las para a incidência do roteador. Role para baixo, é enquanto rotas uma constante, tudo o que precisamos fazer é simplesmente passar nossas rotas de cima e ter certeza que isso é rotas para nos permitir alternar entre essas rotas, precisamos modificar os links de navegação cabeçalho. Vamos passar para o cabeçalho W. Precisamos usar um componente de link de roteador, navegar entre essas rotas. Para começar, vou comentar o link existente. Vamos comentar o link a, o menu inicial, também contatos e também sobre nós, qualquer lugar que possamos adicionar um link de roteador. O link do roteador apenas se parece com qualquer outro elemento HTML. Um link de hífen do roteador, isso tem uma abertura e também uma marca de fechamento. Temos de fechar isto. Dentro da tag de abertura, podemos, em seguida, adicionar To propriedade e, em seguida, adicionar uma barra. Estas propriedades To que acabamos de adicionar é o caminho que você deseja vincular e é muito é uma das rotas que acabamos de configurar no main.js, os componentes correspondentes serão renderizados. Dentro do nosso link de roteador, podemos novamente passar nosso link usando os elementos a, o nome do link de casa, e depois fechar nosso link tendo cuidado para não adicionar a propriedade href dentro aqui, uma vez que usamos o roteador de visualização para Lidar com tudo isso. Vou copiar o link do roteador, rolar para baixo até o menu. Em seguida, você pode alterar o link do roteador para ser o caminho do menu de barra. O título do menu vai até Empreiteiros. O caminho é a barra de contatos e, em seguida, finalmente, o mesmo para cerca de. Agora, o roteador de visualização sabe exatamente quais componentes queremos renderizar para cada rota. Mas também precisamos dizer ao roteador view exatamente onde queremos que eles sejam exibidos em nossos projetos no arquivo app.view. A etapa final é adicionar os componentes da visualização do roteador. No momento em que temos o admin e a casa exibindo ao mesmo tempo no lugar, podemos adicionar a visão do roteador. Isso tem uma abertura e também uma tag de fechamento e este será o local onde o componente renderizado será exibido. Basicamente, isso funciona como uma saída para qualquer componente selecionado no menu. Isso significa que agora podemos remover todos os componentes do nosso script abaixo, ainda precisamos do cabeçalho do aplicativo para que possamos deixar este em ou podemos remover o menu Admin e home. Já não precisamos disto. Também podemos limpar nossos componentes, deixando apenas o cabeçalho do aplicativo. Com tudo isso agora no lugar, podemos iniciar nosso servidor de desenvolvimento com npm run serve. Vá até o navegador e podemos abrir isso em nosso pote, que é localhost 8080. Temos o nosso componente de casa. Vamos clicar nisto. Podemos então ir para o nosso link de menu e dizemos que isso é renderizado logo abaixo. De volta para a casa. Lembre-se no main.js, nós apenas configuramos o Início nas rotas do menu. Se clicarmos no contato e sobre nós, ainda não temos nenhum conteúdo. Agora está no lugar. Vamos agora passar para o próximo vídeo, onde vamos dar uma olhada nos componentes do link do roteador com mais detalhes. 23. Ligação do roteador em mais detalhes: No último vídeo, adicionamos com sucesso o link do roteador. A ligação entre caminhos dentro da nossa aplicação. Se nos dirigirmos para o navegador e, em seguida, ir para o botão direito do mouse e inspecionar, podemos abrir as ferramentas de desenvolvedor e dar uma olhada na saída do código. Se olharmos para a nossa seção de cabeçalho, abrir isso para cima e, em seguida, para baixo em nosso link de navegação, vemos que temos nossa lista desordenada. Dentro de nossa lista não ordenada, temos nossos itens de lista onde temos nosso link renderizado aqui dentro. No entanto, se agora abrirmos o link, vemos um segundo um elemento aninhado dentro. Nós sabemos se vamos para o cabeçalho, o arquivo view, que devemos ter um único link porque nós adicionamos isso no último vídeo. Por que vimos dois links em vez disso? Bem, isso ocorre porque, por padrão, o componente de link do roteador renderiza uma tag. Podemos alterar isso adicionando um nunca prop chamado tag, que nos permitirá configurar o link do roteador para ser um tipo diferente de elemento. Eu vou para o cabeçalho. Dentro do nosso link de roteador, logo após os dois prop, podemos adicionar um segundo teste chamado Tag e definir isso para ser um item de lista. Isso também significa que agora podemos remover as tags li circundantes, já que não precisamos delas. Remova este e também o abaixo. Também podemos remover os comentários. Isto está nos nossos boutons. Podemos fazer o mesmo logo acima. Podemos remover o último item, configura uma tag para ser novamente um item de lista e fazer o mesmo para os dois primeiros. O menu remover o item da lista, tag de li e, finalmente, o mesmo para os componentes da casa. Dê um Salve e volte para as ferramentas do desenvolvedor. Se dermos a isso um Refresh, agora podemos voltar para o nosso cabeçalho, para a navegação, a lista não ordenada e abrir um dos nossos itens de lista. Dentro vemos um único link é renderizado e ainda temos o item de lista circundante. Link está parecendo mais como deveria ser. Além disso, você verá que existem algumas classes adicionadas ao item da lista circundante. Há ligação do router, exactamente activo, ligação do router activo dois. link exato do roteador significa que o caminho deve ser uma correspondência exata. Como exemplo, ao usar a rota de casa, temos a barra direta por si só. Em outra rota, como para a frente barra meu novo, isso também começa com uma barra para a frente dois. Sem essa classe exata, os padrões exuberantes seria muito para todas as rotas. Na classe exata significa que todo o caminho deve ser uma correspondência exata em vez de apenas olhar para a barra no início. A segunda classe adicionada é o link do roteador ativo. Exibir roteador adiciona automaticamente essa classe para o link ativo atual. Podemos ver isso em ação quando clicamos nos links acima. Se entrarmos em contato conosco, veremos que isso está sendo removido. link de roteador ativo agora está sendo colocado no novo link de contato. Nós também podemos tirar proveito desta classe para adicionar alguns CSS personalizado. Você também pode estar se perguntando por que usar o link do roteador em tudo. Afinal, já tínhamos uma tag onde poderíamos adicionar um link também. Bem, existem algumas razões pelas quais usar o link do roteador é uma abordagem melhor. Em aplicativos de página única, a idéia é que você faça uma solicitação para o servidor para cada página inicial. Cada página depois é então comutada pelo roteador dentro do navegador para que não precisamos continuar fazendo solicitações para o servidor. uso do link do roteador intercepta o evento de clique para que o navegador não tente recarregar cada página. Em vez disso, ele apenas alterna entre os componentes. Esta é uma das razões pelas quais não fazemos o nosso atributo de ódio a um link porque isso fará uma nova solicitação para o servidor. Além disso, em breve estaremos olhando para diferentes modos chamados História e dura e vamos rever estes em breve. Put roteador link também nos permite alternar entre esses modos, sem fazer nenhuma alteração extra. Estes são apenas alguns detalhes extras para tornar o link do roteador renderizado exatamente como queríamos. 24. Associação e rotas dinâmicas: Às vezes, quando criamos rotas, precisamos levar em conta que os caminhos para determinadas páginas também podem mudar. Por exemplo, dentro de nossa URL, poderíamos ir para as rotas de casa e, em seguida, ter usuário barra barra e, em seguida, encaminhar barra algum nome de usuário. Esta seção de nome de usuário será naturalmente diferente para cada usuário. Portanto, podemos querer usar os mesmos componentes para cada usuário conectado ou o menu podemos ter algumas seções diferentes. Podemos ter menu de barra para a frente e, por exemplo, podemos tomar bebidas, ou podemos ter comida. Podemos querer mostrar os mesmos componentes do menu, mas basta pular para diferentes seções do nosso menu. No entanto, isso será difícil porque os caminhos para o roteador, como já aprendemos, precisam ser uma correspondência exata. Para este caso de uso, podemos usar correspondência de rota dinâmica em, que envolve dizer ao roteador vista, quais partes da URL podem mudar e podemos fazer isso nas rotas sobre o ponto principal js. Vamos para este arquivo e podemos configurar o segmento dinâmico adicionando dois pontos seguido pelo nome de nossa escolha. Então, dentro do menu, podemos adicionar uma barra e, em seguida, usar os dois pontos para declarar que esta seção será uma parte dinâmica da URL. Ao adicionar isso, os componentes do menu serão exibidos cada vez a URL termina com o menu barra e, em seguida, barra qualquer nome dentro daqui. O segmento dinâmico pode ser qualquer parte da URL também dependendo da necessidade específica. Por exemplo, poderíamos ter uma seção dinâmica e, em seguida, barra e, em seguida, uma seção codificada. Isso é útil para coisas como seções de administração, onde podemos ter uma barra, um ID de usuário e, por exemplo, ordens de barra. Outra coisa a notar também, que este nome que demos a seção dinâmica, também atua como uma variável. Podemos acessar os dados dentro de nossos componentes usando este nome de variável. Então, se passarmos para os componentes de menu, vista de ponto de menu e, em seguida, rolar para cima até o topo de nossos modelos logo acima da nossa seção de menu aqui. Dentro das chaves duplas, podemos usar $ símbolo rota para acessar todas as nossas informações de rota. Queremos acessar os parâmetros de pontos params e, em seguida, o nome da variável de itens. Dê a este arquivo um salvamento e sobre o navegador dentro da URL. Podemos então acessar nosso link. Então vamos para o menu de barra e, em seguida, nossa seção dinâmica, que pode ser qualquer palavra que escolhermos, eu vou adicionar bebidas aperte Enter. Agora vemos que nossos componentes de menu foi renderizado e isso também é puxado para fora os parâmetros de URL e eu vou colocar isso na tela. Esta é uma funcionalidade que não precisamos em nosso aplicativo, então eu vou remover isso e restaurar o menu de volta para o menu barra para frente. Mas isso é algo realmente útil para saber ao usar o roteador de visualização. Também no menu, você pode alterar isso para ser menu barra direta. Embora você também queira submeter seções dinâmicas, os caminhos reais no componente de link do roteador também podem ser dinâmicos. Por exemplo, se passarmos para o ponto de vista cabeçalho dentro do nosso link roteador, os dois prompts que tivemos um valor codificado de menu barra, contato e sobre. Nós também podemos fazer estes dinâmicos também, adicionando-os à nossa instância view. Então, sob o nome, podemos adicionar uma propriedade de dados. Vamos devolver um objeto também. Aqui dentro vou adicionar quatro valores de dados. O primeiro vai ser o link principal. Configure isso como nossa cadeia de barra, o link do menu dois, que é o menu barra direta, o link de contato do contato barra direta e, finalmente, o link sobre na parte inferior da barra para frente sobre. Podemos então usar esses nomes de dados no link do roteador, prefixado com dois pontos para indicar que isso é dinâmico. Ao invés deste valor de string codificado, podemos adicionar aos dois pontos pouco antes e podemos configurar isso para ser link home. O mesmo para o menu. Isto vai ser o link do menu. Podemos adicionar os dois pontos para isso e vamos fazer o mesmo e logo abaixo para os nossos dois últimos links, adicionar os dois pontos. Este é o link de contato e a seção sobre, este é o link sobre. Diga isso, e vá para o navegador e vamos para a casa. Você vê a barra para a frente no final, o menu para a frente barra contato e, finalmente, sobre. Isto é talvez algo que você não vai precisar usar muito. No entanto, é bom saber que isso está disponível se tivermos um caso de uso para ele, como se precisássemos criar dinamicamente uma URL e inserir quaisquer variáveis nele. Podemos então adicioná-los à nossa propriedade de dados e, em seguida, atualizar o URL de acordo. Então este é agora para roteamento dinâmico. No próximo vídeo, vamos dar uma olhada exatamente no que esse hash está dentro da URL, dando uma olhada no histórico nos modos hash que o roteador fornece. 25. Histórico e modos de hash: Você já deve ter notado que desde que começamos a usar o roteador de exibição, houve um hash adicionado ao final da URL. Isso ocorre porque, por padrão, o roteador está definido para o modo hash e a razão pela qual esse hash é adicionado é para evitar uma recarga de página quando uma rota é alterada. Eu mencionei anteriormente que ao usar aplicativos de página única, queremos apenas enviar a solicitação para o servidor para a página de índice principal apenas. Em seguida, as rotas assumem a partir daí e alternam entre componentes sem enviar solicitações do servidor. Este modo é útil para nossos aplicativos de página única, mas geralmente, não queremos ter um hash dentro da URL, pois ficaria muito mais agradável sem um. Para remover o hash, podemos alterar o modo hash para modo histórico e podemos fazer isso no arquivo main.js. Vamos para lá e podemos adicionar o modo histórico aos nossos objetos de roteador. Logo abaixo do nosso objeto roteador onde adicionamos nossas rotas, podemos adicionar a configuração de modo e alterá-la para ser uma string chamada Histórico. modo Histórico aproveita a API de histórico HTML5, que nos permite alterar uma URL específica sem a necessidade de atualizar. Não precisávamos adicionar o modo hash antes à nossa instância de roteador de exibição porque esse é o padrão. Agora, se salvarmos este arquivo e passar para o nosso aplicativo, clique no link Home. Agora vemos que o hash foi removido e o mesmo se clicarmos em nossos links para. Isso agora parece melhor, mas também cria um pequeno problema que precisamos contornar. Também precisamos configurar nosso servidor para lidar com essa nova configuração. Nosso servidor precisa retornar o índice ou HTML em todos os casos, incluindo quaisquer erros 404. Uma vez retornado, o roteador assume o controle e lida com a alternância entre componentes no front-end. Se você fizer isso em um aplicativo de produção real, você encontrará alguns exemplos de configuração de servidor na documentação do vue router. Se você for para a documentação do roteador vue e dentro da nossa opção de modo histórico HTML5. Aqui, se rolarmos para baixo, podemos encontrar alguns exemplos de configurações de servidor onde podemos ver esses exemplos para diferentes tipos de servidor e isso é algo que voltaremos mais tarde ao lidar com hospedagem, mas por enquanto, este é o lugar onde você pode encontrar alguns exemplos de configurações se estiver usando um servidor diferente. A última coisa a cuidar agora é a página index.html, que sempre é retornada do servidor, então não recebemos nenhum erro 404 relatado pelo servidor quando uma URL não é encontrada. Se formos para o nosso projeto e digitar um URL não reconhecido, não teremos nenhum componente aparecendo na tela porque não temos nenhuma configuração de rotas que correspondam, então precisamos de uma maneira de lidar com esse caso e vamos dar uma olhada neste no próximo vídeo. 26. Capturar todas as rotas e redirecionar: Terminamos no último vídeo mencionando que, uma vez que mudamos nosso modo de roteador, precisamos de uma maneira de lidar com qualquer seguimento para erros quando um URL não é encontrado. Esta é uma solução bem simples. Tudo o que precisamos fazer é adicionar uma rota de captura para esses casos e podemos fazer isso de volta no arquivo js-ponto principal. Podemos criar uma nova rota que vai lidar com isso em nossa matriz de rotas. Logo após o menu, podemos adicionar novos objetos, onde o caminho será igual a uma estrela. A estrela como um caminho URL nos cobrirá para quaisquer caminhos que não sejam correspondidos acima. Assim como nossas outras rotas, podemos adicionar um componente para exibir se o caminho não for correspondido. Por exemplo, aqui podemos adicionar um componente como a seguir quatro páginas. Alternativamente, também podemos adicionar um redirecionamento, que irá redirecionar para qualquer página que escolhermos, como a rota para casa. Se dissermos isso e nos dar uma chance no navegador, podemos adicionar em um URL não reconhecido. É entrar, e redirecionamos para a rota de casa. Estas são algumas opções para nos cobrir para URLs não reconhecidas. Podemos redirecionar para uma página diferente ou configurar componentes personalizados com algumas instruções para o usuário. Este redirecionamento também pode ser usado em qualquer outra rota, não é reservado apenas para a rota catch-all. A seguir no próximo vídeo, continuaremos no assunto do roteamento e veremos como podemos adicionar rotas aninhadas ao nosso aplicativo. 27. Rotas aninhadas: As rotas que temos usado até agora têm sido bastante simples. Temos todos os itens do menu. Você fica aqui no mesmo nível sem itens infantis. O roteador torna mais fácil para nós adicionar rotas aninhadas, para agrupar rotas cuja quantidade relacionada. Nós configuramos componentes na última seção. Apenas o contato e guia de pedidos, que você pode ver aqui dentro. Essa ideia para agruparmos como componentes filho ou aninhados do link sobre nós de volta dentro deste arquivo main.js. Podemos começar isso como qualquer outra rota, adicionando nosso objeto à nossa matriz de rotas, podemos adicionar um caminho. Desta vez estamos lidando com o link sobre, então isso é barra sobre. Logo depois disso, também queremos renderizar um componente. Os componentes principais quando clicado em é sobre. Em seguida, para adicionar quaisquer rotas filho aninhadas, tudo o que precisamos fazer é separá-lo por uma vírgula. Podemos adicionar a propriedade filhos e, em seguida, configurar isso como uma matriz. Aqui dentro, vamos adicionar algumas opções, praticamente como fizemos com nossas rotas de nível superior. Vamos montar um objeto onde montamos um caminho. O primeiro caminho é para o histórico de barras. Assim como em cima. Em seguida, renderizamos um componente. Vou dar ao componente um nome de história, que será importado em apenas um momento. Separado por uma vírgula, vou copiar e duplicar isto mais duas vezes. O segundo vai ser para entrega e o componente também vai ser entrega também. Bem no final, vamos substituir isso com o Guia de Ordenação e também o caminho que está ordenando guia hífen. Uma das coisas para se atentar ao aninhar rotas de canal é o caminho para a rota. Ao escrever uma rota filho dentro desta matriz, a maneira como escrevemos o caminho também é importante. Se adicionarmos uma barra no início, o caminho será tratado como um caminho raiz. Vou adicionar um exemplo logo abaixo, então o histórico de barras nos deixaria com nossa URL, como pizza planets.com, histórico de barras. Alternativamente, se não tivéssemos a barra antes da história, poderíamos simplesmente ter digitado a história dentro do nosso caminho. Este será pizza planets.com. Isso levaria em conta o caminho do pai de barra direta sobre, em seguida, seguido pela história logo depois. Essas são duas abordagens diferentes, todas dependentes da barra direta dentro do caminho, dependendo de qual maneira você deseja construir as URLs. Vou apenas remover estes dois exemplos aqui dentro. Em seguida, também são uma vírgula para separar este link sobre. Nós também podemos adicionar o nosso link de contato dois, mas este está no nível raiz, juntamente com o nosso menu em casa. Vou adicionar isso como nosso terceiro item. Um caminho é o contato barra direta e os componentes são para contatos. Câmera no final. Então também nosso administrador dois. Isso não é controlado por um link de menu, mas ainda podemos acessá-lo usando a barra de administrador dentro de nossa URL. Em seguida, os componentes do admin e uma vírgula no final. Em seguida, precisamos importar nossos componentes que você deseja usar, que são os componentes filho e administrador e contato. Vamos duplicar isso mais algumas vezes. O menu que muda para ser admin. Também precisamos importar a página Sobre, também precisamos de contato. Também precisamos de histórico, entrega e guia de pedidos. Entrega e, finalmente, no final, precisamos do guia de pedidos. Uma vez feito isso, dê a este arquivo um salvamento e vá para o navegador. Vamos checar nossas rotas de casa. Temos nosso menu ainda funcionando, entre em contato conosco. Podemos testar o nosso Admin barra. Isso tudo está funcionando também. Então, finalmente, temos o link sobre nós que tem um componente filho. Se clicarmos nisso, nenhum dos componentes filho será visível. Isso ocorre porque o componente de exibição do roteador, que temos, se você abrir o app.view. Este é o componente de visualização do roteador que temos atualmente. Isso renderiza o componente para a tela. Mas só renderiza as rotas de nível superior. Para exibir um componente da rota HL, precisamos adicionar um segundo componente de exibição do roteador aninhado. Vou te mostrar como fazer isso no próximo vídeo. 28. Visão de roteador aninhado: Como descobrimos no último vídeo, quando clicamos no link Sobre Nós dentro do nosso menu, vemos apenas o componente About Us vazio e nenhum dos componentes filho são exibidos. Isso faz sentido porque este é o componente pai e queremos ter controle sobre como as rotas filho são exibidas. Para alternar entre as rotas filho, precisamos passar para os componentes sobre e, em seguida, fazer duas coisas. Primeiro, precisamos adicionar alguns links de menu para alternar entre os componentes filho. Em seguida, para realmente exibir esses componentes, o componente about também precisará de seu próprio componente de visualização do roteador também, que podemos adicionar abaixo do menu. Vamos começar dentro de nossa div, dentro dos modelos principais. Queremos começar com uma posição de nível três com uma inclinação em ambos os lados. Em seguida, o texto de, “Clique nos links abaixo para obter mais informações.” As etiquetas de navegação, que vão aninhar dentro de uma lista de pedidos. Isso na lista de pedidos vai conter nossos links. Para isso, em vez dos itens da lista, usaremos o link do roteador, certificando-se de que ele fecha logo abaixo. Dentro da tag de abertura, podemos adicionar nossos dois adereços, e seu link para a rota do histórico de barra. Podemos adicionar nossa tag que vai ser um item de lista, e, em seguida, aninhado dentro de um link. Não precisamos do href uma vez que o roteador view vai lidar com nosso roteamento. Em vez disso, vamos apenas adicionar uma classe que vai ser nav link. O texto dentro da nossa história e esta é a nossa primeira rota infantil. Vou copiar isto. Lembra-te que tínhamos três ligações. O segundo será para o guia de pedidos. Isso vai ligar para o guia de pedidos. Em seguida, o texto do guia de encomenda também. Tudo o resto está bem. A terceira e última ligação será para a entrega. Altere o texto e também os dois prop, salve este arquivo e vamos clicar no link Sobre Nós no forward-slush sobre rotas. Agora vemos nosso cabeçalho de nível três e nossos links de menu abaixo. O estilo também precisa de um pouco de trabalho, mas vamos voltar a isso. Se clicarmos nos links do histórico, guia de pedidos e entrega, veremos que a URL é alterada nos dois primeiros. Esses links estão alterando o URL, mas não vemos nenhum componente sendo exibido ainda. Para vê-los, como mencionamos antes, também precisamos adicionar uma visão do roteador para mostrar o link selecionado logo abaixo do menu. Logo após o nosso nav, podemos adicionar dentro de uma visão de roteador. Feche isso. Salve isso. Lá vamos nós. Há nossas informações de entrega, o guia de pedidos e os componentes do histórico. Finalmente, podemos terminar isso adicionando um pouco de estilo em. Primeiro, podemos centralizar o nível três indo para cima. Vamos voltar para o sobre.Vue. Abaixo do script podemos adicionar as tags de estilo, tag é o h3. A linha de texto vai ser central e isso agora empurra isso para o meio. Além disso, os links precisam de algum trabalho também. Em vez de repetir o estilo para esses links e também o cabeçalho principal, vou adicioná-los como estilos globais. Vou colocar estes no app.vue sem a palavra-chave com escopo. Esta é apenas a minha escolha pessoal de adicioná-los aqui neste arquivo. Ele também funcionará em qualquer um de nossos arquivos também sem a tag scope. Vamos começar com o corpo. Vou configurar a fonte firmemente do texto Carmesim. Com um simples recuo setit. A margem pode ser redefinida para zero. Além disso, o tamanho da fonte do corpo para ser 1.5em. Em seguida, os links. A decoração de texto para ser nenhum. A cor que vamos herdar por baixo disto, podemos segmentar a lista de pedidos. Vou definir o tipo de exibição para fazer uso da flexbox, para que possamos justificar o conteúdo no centro. Podemos redefinir qualquer margem para ser zero. Além disso, algum preenchimento para a nossa lista de ordem de 10 pixels na parte superior e inferior e zero na esquerda e direita. Uma cor de fundo. Vou usar o valor hash de f1e6da. Também precisamos remover os marcadores dos itens da nossa lista. Podemos fazer isso com o estilo de lista definindo isso como nenhum. Salve isso. Para o navegador. Também precisamos adicionar algum espaçamento entre esses links. Aqui usamos um til dentro de um elemento span. Eu vou adicionar alguma margem em torno disso e também usar o mesmo ícone til e logo abaixo também. Vamos voltar ao about.vue e abrir dentro do nosso modelo. Logo após cada link de roteador, podemos adicionar um span, o ícone de tilde, e copiar isso, colar isso logo após o nosso guia de pedidos. Estou trabalhando nisso como estilos globais de volta no app.vue. Logo após o nosso item da lista, podemos marcar o span e definir a margem de zero na parte superior e inferior e cinco pixels à esquerda e à direita. Para o navegador. Lá vamos nós. Ainda há um pequeno estilo para adicionar ao nosso projeto, mas voltaremos a isso mais tarde no curso. Com nossas rotas aninhadas agora funcionando, eu vou vê-lo na próxima vez onde vamos cobrir usando rotas de nome. 29. Adicionando nomes às rotas: Se voltarmos ao nosso main.js, onde declaramos todas as nossas rotas para a nossa aplicação. Todas as rotas que criamos até agora usaram uma string para especificar o caminho do URL para o qual você deseja navegar. Como barra, menu de barra de caminho, contatos de barra de caminho e também sobre. Isso funciona perfeitamente e não há nada de errado em usar essa abordagem. Há uma alternativa, no entanto, que pode ser mais conveniente, especialmente para caminhos mais longos. Esta alternativa é adicionar um nome à rota. Podemos fazer isso dentro dos objetos rotas, ou precisamos fazer é adicionar a opção de nome. Em seguida, dentro aqui podemos especificar como uma string e nome que você deseja dar a este. Vou adicionar ao link inicial e depois uma vírgula. Esses nomes são totalmente com você. Basta ir com algo que melhor descreve a rota disposta a consumir. Nós também podemos adicionar isso a todos os nossos objetos sobre também, colar isso em. O segundo será para o link do menu. O próximo, este é para o link de contato. Em seguida, o link de administrador. Nós também podemos adicionar isso às nossas rotas canalizadas para, isso não é apenas para nossas rotas de nível superior. Podemos adicionar isso para o nosso link histórico, a entrega e também para o nosso guia de pedidos também. Agora tudo o que precisamos fazer é salvar este arquivo. Vou fazer uso desses dentro de nossos menus, começando com o header.view. Dentro do nosso roteador, já temos alguma forma de rotas de nome, que foi configurado no início da seção. Cada um desses nomes são dinamicamente vinculados à nossa propriedade datas. Para fazer uso dos nomes que acabamos de configurar em um roteador. Dentro de nossas citações, precisamos passar isso como um objeto, passando no nome onde o valor é o nome do nosso link. Em seguida, podemos fazer o mesmo para todos os objetos de passagem de link menu e definir o nome como uma string. Então poderíamos fazer o mesmo para o link de contato e também sobre. Estes também precisam do cólon dinâmico para ligar isso como antes. Mas agora podemos remover a propriedade date entre essas tags de script, já que não precisamos mais disso. Vamos limpar isto. Em seguida, podemos ir para o about.view, onde também temos um menu para estes não são atualmente dinâmicos. Precisamos adicionar ao cólon, para ligar isso. Poderíamos remover isso e fora de objetos com a propriedade name e o valor do nome, que vai ser link histórico. O mesmo para o guia de pedidos, logo abaixo. Aperte nosso objeto com o nome. Este foi o link do guia de pedidos. A entrega no cólon, aperte nossos objetos. Este era o link de entrega. Este deve ser agora todos os nossos links atendidos. Tudo o que precisamos fazer agora é testar nossos links, ainda está funcionando no navegador. Vamos passar por cima. Temos a casa, o menu, contato e navegadores. O link sobre está funcionando. Vamos verificar isso no cabeçalho, isso só precisa ser sobre, diga isso. O link sobre está funcionando agora. Podemos testar as rotas aninhadas. Histórico, guia de pedidos e entrega. Nosso URL é atualizado com o URL correto. Mesmo que agora nos referimos a isso por um nome. É assim que podemos adicionar nomes às nossas rotas, e em seguida vamos olhar para mudar rotas sem a necessidade de clicar em links usando router.push. 30. Métodos de navegação do roteador: Todas as navegações que realizamos até agora foram resultado do uso do componente de link do roteador para nos levar ao caminho que especificamos. Há também uma maneira alternativa de fazer isso, no entanto, usando código para navegar programaticamente. Se formos para os componentes home.vue, dentro da pasta de componentes, adicionamos um botão na linha sete aqui para levar o usuário ao menu. Ainda não adicionamos nenhum link para este botão. Mas também podemos usar o roteador para empurrar para qualquer local. Vou começar adicionando um ouvinte de clique a este botão dentro da tag de abertura. Então use [inaudível] clique. Agora vou usar isso para descobrir um método que eu vou chamar Ir para Menu. Role para baixo até o nosso script. Então podemos configurar isso logo após nosso nome de propriedade. Podemos configurar nossos métodos e nosso nome método de Ir para Menu. Podemos acessar qualquer método que tenha sido fornecido com o roteador vue dentro desta instância vue usando este route.$. Lembre-se de qualquer prefixo com este $ indica que isso é nativo para vue.js, ou, neste caso, o pacote do roteador em vez de um método personalizado que criamos nós mesmos. Aqui podemos dar uma olhada em alguns dos métodos de navegação fornecidos pelo roteador. roteador Vue nos dá a opção de navegar para trás ou para frente acessando o histórico do navegador. Ele faz este roteador.go estranho, e este é o primeiro método que nós vamos olhar. Isso leva em um único argumento para declarar quantas páginas queremos mover. Números positivos moverão as páginas para a frente no histórico do navegador. Números negativos, voltará uma página no navegador. Podemos testar isso passando para a nossa aplicação. Então, dê um salvamento a isto. Vamos clicar no “Menu” e clicar em “Início”. Agora, se clicarmos no botão do lado esquerdo, ele deve nos levar de volta uma página que foi para o menu. Vamos tentar mais um. Se formos para o link sobre e, em seguida, para casa, clique neste botão ele deve nos levar de volta para a página Sobre. Este número também pode ser mais do que um, se você tiver um caso de uso para isso. Outro método que está disponível no roteador é router.replace. Isso é usado para substituir o URL atual com o que adicionamos dentro desses colchetes. Então, se quiséssemos ir para o menu, poderíamos adicionar uma string de menu barra, sobre o navegador. Vamos para o Fale Conosco, depois para “Casa”. Clique no botão. Isso então nos envia para a página do menu. Ou como vimos no último vídeo. Nós também poderia passar em um objeto e usando rotas nomeadas, passando a propriedade name. Em seguida, o nosso link de menu, que nós configuramos. Vamos dar uma chance a isso. Contatos, casa e isso ainda nos empurra para o menu. No entanto, há uma desvantagem potencial ao usar esse método de substituição. Vou te mostrar agora. Se formos, por exemplo, para a página Sobre e, em seguida, clicar em “Home”, clique no botão “Let's Order”. Se navegarmos de volta usando o botão Voltar do navegador, isso nos levará de volta à Página Sobre Nós em vez da página inicial que era os componentes anteriores. A razão pela qual isso acontece é, como o nome sugere, o histórico de navegação é substituído em vez de adicionado a. Se quisermos este link, vamos ser adicionados ao histórico do navegador para que possamos usar os botões de volta desta forma. Há outro método disponível para nós chamado router.push. Isso também é usado para navegar para um URL diferente. Mas a diferença é as rotas e são empurrados para o histórico de navegação em vez de substituídos. Vamos dar uma chance a isso. Mudanças a serem empurradas. Vamos fazer o mesmo que antes, vamos para Sobre, para Início, clique no botão, que nos leva para o menu. Agora, se voltarmos, agora vamos levar para o componente home em vez da About Page. Ambas as maneiras são boas para usar, mas é claro, isso depende do comportamento que você deseja alcançar dentro de seu aplicativo. 31. Proteções globais de navegação: Às vezes, ao navegar entre rotas, queremos executar uma ação mesmo antes de a rota ser navegada também, ou logo depois. Como exemplo, estaremos configurando alerta aberto para carregar logo antes que a página de administração seja navegada também, o que dirá ao usuário que esta é uma área restrita, e primeiro ele precisará fazer login. Além disso, ao sair do administrador, um alerta também aparecerá, que informará ao usuário que ele será desconectado automaticamente ao sair dessa área de administração. Isto é por razões de segurança. Os perigos da VureRouter cobriram este caso de uso, fornecendo protetores de navegação, como os ganchos de instância do Vue. Os guardas de navegação permitem-nos ligar a certas fases da navegação. Além disso, podemos adicioná-los globalmente para todo o nosso aplicativo ou aplicá-los localmente a determinadas rotas. Vamos começar dando uma olhada no global antes de cada guarda. Estou olhando para isso no main.js. Após o nosso roteador aqui, podemos acessar nossas rotas disponíveis e depois acessá-lo antes de cada gancho. Isso vai levar em uma função, e também leva em três argumentos, que vamos dar uma olhada em um momento. Além disso, como este é um gancho global, o código que você adiciona é executado sempre que qualquer ação de roteamento é acionada. Por exemplo, olhar para adiciona um alerta que detecta fora da navegação disparada. Se agora salvarmos isso e passar para o navegador, veremos os alertas aparecer imediatamente, e também para cada link de navegação que clicamos. Isso funciona bem, mas observe que não há componentes de página na tela. Isso ocorre porque a ação de roteamento não será concluída até que chamemos uma função chamada seguinte. Segue-se um dos três argumentos que podemos passar antes de cada um. O primeiro é para, e esta é a rota em que navegamos. A segunda é de, e esta é a rota que estamos saindo. Então, finalmente, temos a próxima função, e é essa próxima função que você pode passar para completar a navegação e carregar os componentes da página. Se agora passarmos por cima, clique no alerta, a ação de roteamento é concluída. Em seguida, movemos para os componentes da página em que clicamos. Esta próxima função dirá ao roteador Vue para passar para o próximo gancho de navegação, se houver um disponível. Se não houver mais ganchos disponíveis, então, como vimos aqui, a navegação não está confirmada. Também podemos parar esta navegação se tivermos um caso de uso para isso, passando em um valor booleano de false. Isso impedirá que os componentes da página sejam carregados. Isso será o mesmo para cada rota de navegação. Nós mencionamos antes que também temos acesso aos dados de e para, que também passamos como argumentos. Para ver estes, podemos passar em um log de console, tomando o valor para, e podemos ver exatamente quais dados são fornecidos aqui. Então vamos fazer isso sobre o navegador e clique com o botão direito do mouse em Inspecionar e, em seguida, clique no console. Além disso, como uma nota lateral, se reduzida novamente, nenhuma mensagem de erro do console no navegador. Esta é uma configuração no eSLint. eSLint é fornecido ao configurar a CLI do Vue. Isso é usado para verificar se há erros no código. Às vezes, por padrão, ao usar o eSLint, as mensagens do console fornecerão um erro. Então, se você precisar desabilitar isso, vá para o arquivo package.js, abra isso, e dentro daqui teremos um ES chamado config objects. Dentro deste objeto, se rolarmos para baixo, dentro dos objetos de regras, precisamos adicionar um valor de nome par de nenhum console e desligado. Se você adicionar isso, salve o arquivo e reinicie o servidor de desenvolvimento. Em seguida, você não deve ter problemas ao visualizar o console, não pode continuar com o resto do curso. Além disso, novamente, com eSLint, podemos precisar remover quaisquer variáveis não utilizadas barra remover de um próximo, e dar uma olhada no objeto dentro do console. Vamos, por exemplo, clicar no menu e abrir este objeto que é fornecido de antes de cada um. Então este é o caminho em que navegamos. Vamos ao menu. Este é o nome do roteador. Podemos ver se algum parâmetro foi passado, e temos acesso a qualquer uma dessas propriedades dentro do nosso código. Então, em vez de usar o log do console, por exemplo, você pode adicionar uma instrução if para verificar se e acessar o caminho será igual ao menu de tela ou barra. Se for, vamos continuar para as rotas e diremos outra coisa. O próximo será igual a falso. Isso permitirá que o roteador vá apenas para componentes do menu e qualquer uma das páginas será bloqueada. Uma vez que agora estamos fazendo uso do próximo, nós também podemos passar no resto de nossos argumentos. Então, a partir do próximo, digamos até mesmo ir para o navegador. Então, agora, se clicarmos nas rotas de casa, não vemos nenhum componente. Se clicarmos no menu, permitimos que estes carregassem uma vez que o caminho é igual ao menu. Vamos tentar contatos e isso está bloqueado. O mesmo com sobre nós, e também voltar para casa junto com antes de cada um. Nós também temos disponível o pós-cada guarda global para. Como o nome sugere, isso é chamado depois que cada navegação é confirmada. Isso não pode afetar a navegação porque ela é executada após a navegação ter sido concluída. Portanto, ele não recebe a próxima função como um argumento. Portanto, chamar a próxima função não é necessário também. Podemos ver isso novamente passando um alerta, e qualquer texto dentro daqui, vamos dizer depois de cada, salvar e sobre o navegador. Novamente, podemos não usar necessidade de argumentar, então podemos precisar removê-los. Vemos o alerta, clique em Ok, entre em contato conosco, e isso está carregado bem também. Então, como você pode ver, mesmo sem a próxima chamada, os componentes de páginas ainda são renderizados, e vemos o alerta exibido como esperado. Este é um gancho nunca útil que pode ser necessário se precisarmos executar uma ação após a rota ter terminado ocorrendo. Mais uma vez, estes dois são guardas globais que serão usados para cada rota. No próximo vídeo, vamos dar uma olhada nos protetores de componentes, que só afetará os componentes para os quais estamos navegando. 32. Proteção de componentes: No último vídeo, analisamos os protetores de navegação globais, o que afetará toda a nossa aplicação. Uma alternativa a isso é adicionar apenas um protetor dentro de um componente. Dessa forma, somente os componentes que estão sendo navegados de e para serão afetados pela proteção. A primeira coisa que vou fazer é remover a guarda global do último vídeo dentro do main.js para que o alerta não apareça para cada navegação. Em seguida, vou para os componentes admin.view e começar com a pasta de componentes. Vou adicionar um guarda dentro destes componentes. Vou começar com a rota antes de entrar na guarda, e vamos somar isso logo após nossos componentes. Isso pode ser adicionado em qualquer lugar na instância view, eo nome vai ser antes do sensor de rota, que novamente vai levar em e também próximo como argumentos, adicionar uma vírgula para separar isso dos métodos animais para adicionar [inaudível] propriedade logo acima para trabalhar com. Podemos devolver alguns dados. Vamos adicionar um nome, propriedade e adicionar o seu nome dentro daqui. Antes de entrar rota é chamado antes da rota, que quando é componente é confirmado. Aqui eu vou criar um alerta que vai dizer oi para o usuário. Temos o nome do usuário logo acima dentro da propriedade dates. Vou adicionar isso como uma string de modelo dentro dos ticks traseiros. Você pode adicionar dentro da nossa variável, que vai ser este nome. Descartar está dentro do componente admin somente. Vamos salvar isso e passar para o administrador vinculado para ver essa ação. Também podemos precisar remover nossos argumentos livres para que isso funcione. Se clicarmos em qualquer um desses links, não vemos o alerta. Vamos tentar sair para o localhost barra rotas administrativas. Não vemos o alerta que seria configurado. Vamos para o console dar uma olhada. Vemos uma mensagem de erro vermelha não é possível ler o nome da propriedade de undefined. Isso pode não ser imediatamente óbvio qual é o problema aqui. Na verdade, não há nada de errado com a forma como configuramos a propriedade name. Na verdade, o problema ocorrerá se tentarmos acessar qualquer coisa do nosso ponto de vista da incidência. A razão por trás desta área é porque a guarda é chamada antes mesmo do componente ter sido criado. É por isso que não temos acesso aos dados sobre nossa incidência de visão. Se precisarmos adicionar nossos dados de instância vista dentro deste gancho, precisamos adicionar uma solução alternativa. Para fazer isso, precisamos passar uma chamada de volta para a próxima função. Mais uma vez precisamos adicionar a partir de também próximo. Podemos passar na próxima função, que vai adicionar uma função de retorno de chamada, que será executado uma vez que um componente foi criado. Ele diz sobre a função dentro aqui, que eu vou adicionar como uma função estreita passando em VM, que é abreviação para modelo de visão. VM pode ser qualquer nome de sua escolha. Mas ao usar view, é bastante tradicional usar VM como um nome dentro deste callback. Aqui temos acesso à mesma instância de visualização usando VM no local onde normalmente usamos isso. Agora podemos pegar nosso alerta. Podemos trazer isso para baixo em nossa função de retorno de chamada. Podemos então substituir isso pela VM, e isso agora deve funcionar. O que estamos fazendo aqui é basicamente criar uma função de retorno de chamada. Uma vez que a navegação é confirmada e nosso componente foi criado. Uma vez que o componente é criado, então temos acesso aos nossos dados de incidência vista e agora podemos acessar está dentro desta função de retorno de chamada. Tudo o que precisamos fazer é substituir a palavra-chave this pela VM. Vamos salvar isso e ir para o navegador. Vamos recarregar. Agora vemos a mensagem de Oi, Chris. Se você for para outras rotas, isso não funcionará, já que só dissemos isso nos componentes do administrador. Agora temos isso funcionando e podemos passar para o próximo vídeo onde vamos dar uma olhada nas rotas individuais dos guardiões. 33. Protegendo rotas individuais: O último tipo de guarda que eu quero mostrar é o antes de entrar guarda, que pode ser adicionado diretamente para onde definimos nossas rotas no main.js. Antes de criar isso, vou remover qualquer código desnecessário para o nosso aplicativo. Então, no administrador do último vídeo, podemos remover antes de entrar rota, e também a propriedade de dados que configuramos para isso. Salve este arquivo e sobre o main.js. Vou adicionar este novo guarda de navegação às rotas de administração. Então, para tornar isso mais legível, eu vou adicioná-los em duas linhas separadas, separadas por uma vírgula logo após nossos componentes, podemos adicionar o antes de entrar, guard beforeEnter funciona exatamente como o global antes enter guard e também leva os mesmos argumentos livres de dois do nosso próximo. Nós dissemos o servidor como uma função. Vou adicionar um alerta aqui dentro, que vai enviar uma cadeia de texto para o usuário dizer que esta área é apenas para usuários autorizados. Faça login para continuar. Após nossos alertas, também precisamos passar na próxima função para completar a navegação. Digamos que isso é agora se formos para o navegador, e antes de tudo, podemos testar as rotas individuais dentro do cabeçalho e não vemos nenhum alerta para esses quatro links. Se agora formos para a barra Admin, onde aplicaremos esta proteção de navegação. Vemos que nosso alerta apareceu agora. Claro que só aparecer um alerta não é seguro. Mas, mais tarde, ocultaremos a área de administração e só será exibida para usuários conectados. Nós também mais tarde, são eles antes rota deixar deus, dentro dos componentes de administração para quando sair da área de administração. Digamos que faça logout automaticamente do usuário ao navegar para fora do administrador. 34. Definindo o comportamento da barra de rolagem: Quando todos nós sintonizamos, podemos querer preservar a posição de rolagem. Vamos perguntar-lhes quando revisitar uma página, ou, alternativamente, podemos querer rolar para uma sub-posição na página ao navegar para ela, mesmo que ela esteja apenas no topo da página. Usando o roteador de visualização, temos controle total sobre o comportamento de rolagem. Isso também depende do modo do roteador que está sendo definido para modos de histórico. Já temos o modo histórico habilitado no main.js, então podemos aproveitar isso. A primeira coisa a fazer no main.js, é adicionar a função de comportamento de rolagem à instância do roteador. Vamos dar uma olhada, dentro do nosso roteador aqui, eu vou adicionar o comportamento de rolagem. Dentro dos colchetes ou parênteses. Assim como os deuses que olhamos, leva apenas de e para objetos de rota. Também um argumento que passamos em um frio, digamos posição, que é a posição, digamos pelo navegador quando os botões para trás ou para frente foram usados. Diga posição. Dentro desta função, poderíamos definir nosso comportamento de rolagem. Provavelmente a maneira mais simples de fazer isso é retornar um objeto. Estou passando a posição x e y, qual você deseja rolar ao navegar para uma página. Podemos devolver nossos objetos. Podemos definir a exposição para ser zero e, em seguida, definir o y para ser zero também. Usando esta configuração, cada vez que navegarmos para uma rota, a página será rolada para o topo. Você vê esse padrão em ação. Vamos mudar o eixo y para 200. Isso carregará uma nova página, 200 pixels do topo. Vamos salvar isso e, claro, precisamos remover nossos argumentos livres para que você não tenha problemas com Linton, já que não estamos usando esses. Vamos para casa. Não temos conteúdo suficiente nesta página para rolar para baixo. Vamos tentar o menu e você pode ver que estamos a 200 pixels do topo. Alternativamente, podemos passar em um seletor CSS no lugar de coordenadas. Vamos para um seletor e vamos abrir os componentes do menu. Podemos definir o comportamento de rolagem para rolar para baixo para qualquer um dos nossos seletores CSS. Podemos escolher um botão, podemos escolher uma classe. Podemos escolher qualquer ID ou simplesmente um elemento pelo seu nome. Vou buscar a cesta de compras. Vamos para a classe de cestas. Dentro do main.js. Podemos ficar com o nosso objecto. O que substitui por um seletor, que vai ser uma string. Uma vez que esta é uma classe, podemos direcionar isso com o ponto e o nome é cestas. Dê-nos um cofre. Vamos para casa. Em seguida, de volta ao nosso menu. Agora você pode ver que o navegador foi rolado para baixo para o local da cesta. Isso funciona para qualquer dois selecionados apenas [inaudível] ao usar CSS. Lembre-se que mencionamos o parâmetro de posição segura que você passou. Isso salva a posição de rolagem quando os navegadores para frente e backbones são usados. Vamos agora dar uma olhada em como podemos usar isso. Vamos passar os nossos argumentos mais uma vez, que era para, de e uma posição segura. Em seguida, vou adicionar uma declaração if. A instrução if vai verificar primeiro se há uma posição salva. Se a posição salva for verdadeira, vamos retornar a posição salva. Temos um disponível, vamos rolar para esta posição. Se não, vamos adicionar a condição else onde estamos simplesmente indo para retornar um objeto onde nós configuramos a posição x e y para ser zero, assim como olhamos antes. Então, para ver isso em ação, precisamos ir até o navegador e navegar entre algumas páginas. Então, primeiro de tudo, vamos para o menu e, em seguida, role para baixo até o fundo. Podemos então usar o botão Voltar e, em seguida, o botão Seguir para retornar ao menu. Sou uma oposição bem na parte inferior da página. Se tentarmos isso novamente, se rolarmos um pouco para cima, só para que possamos ver algum espaço em branco no menu. Se tentarmos ir para trás e, em seguida, encaminha o navegador , posição salva, nos retorna exatamente ao ponto em que estávamos no menu. O último que quero mostrar mantém a posição guardada, assim como esta que acabamos de ver. No entanto, ele funciona ao alternar entre componentes usando links de menu, em vez de apenas usar os botões para trás ou para frente no navegador. Podemos usar novamente uma declaração if. Mas em vez da posição salva, vamos usar os dois argumentos e selecionar o áspero, e isso irá primeiro verificar se a rota em que navegamos tem um hash local salvo. Se isso acontecer, vamos definir o selecionado para ser igual ao valor deste hash. Podemos retornar dentro das chaves, um seletor como olhei para cima antes. No seletor que vamos adicionar é to.harsh. Também precisaremos remover os parâmetros não utilizados para que não vejamos nenhum erro. Esta noção, precisamos adicionar mais conteúdo a uma das outras páginas. Eu vou para o contato e simplesmente copiar todo o conteúdo do contato rapper. Ser filmagens, manter a div circundante, e colar isso em mais algumas vezes apenas para nos dar um pouco mais de conteúdo dentro de contatos onde podemos rolar para cima e para baixo. Fechamos a barra lateral na parte principal. Também podemos remover a seção L aqui, este arquivo salvar e sobre o navegador. Agora, se tivermos o contato e o menu com algum conteúdo onde podemos rolar para baixo para, eu vou rolar para baixo até logo acima da bandeira. Temos isto como ponto de referência. Alterne para a página de contato. Vemos que a posição do navegador foi salva de volta para o menu. Isso manterá a posição salva entre os componentes. Näo vai funcionar se você for ao Lar, por exemplo, ou sobre nós porque näo temos conteúdo suficiente. Role para baixo também. Mas isso lhe dá a idéia de como ele funciona de qualquer maneira. É isso agora para este vídeo. Só para encerrar isso, vou restabelecer a página de contato apenas para coletar conteúdo apenas uma vez. Dê isso para salvar e restaurar isso de volta ao normal. Estas são as opções disponíveis para nós para controlar o comportamento de rolagem. Em seguida, refatoraremos nossas rotas movendo-as para seu próprio arquivo. 35. Reorganizando nossas rotas: Dentro do nosso main.js onde criamos nossas rotas. Este array de rotas é bastante gerenciável no momento. Não temos muitos arranjos. Mas você pode ver como ele pode realmente desordenar nosso arquivo main.js especialmente se adicionar mais guardas de navegação ou componentes filhos. Podemos pegar todas essas rotas para o main.js e colocá-los lá no arquivo, que irá arrumar as coisas e torná-lo mais organizado. Fazer isso é uma configuração muito fácil. Primeiro, vou adicionar um Novo Arquivo na Pasta de Origem. Eu vou adicionar isso na raiz da fonte e chamar isso de routes.js, em seguida, voltar para o main.js. Tudo o que precisamos fazer é pegar toda a matriz de rotas. Do colchete de fechamento, todo o caminho até a nossa constante, eu vou cortar isso fora. Tudo para nossas rotas, agora podemos colar isso já que é roteador. Se nos referirmos a componentes, também precisamos importá-los. Podemos pegar esses, e Visual Studio Code tornará isso uma cor diferente. Podemos ver que não usamos mais isso. Vou cortar todos esses componentes que não precisam mais, colocá-los em nosso routes.js. Em seguida, precisamos exportar este objeto também. Como isso agora está em seu próprio arquivo autônomo, também precisamos exportar este arquivo, para que possamos importá-lo de volta em nosso main.js. Com um nome correspondente de rotas, que nós demos apenas aqui. O local como uma string é barra de ponto e, em seguida, rotas. Isto é tudo o que precisamos agora fazer. Agora podemos ir para o nosso aplicativo e testar se as rotas ainda estão funcionando bem. Vamos tentar os contatos do menu, o sobre, e também nossas rotas filho estão funcionando também. Isso é algo que não é necessário em pequenas aplicações, mas é algo que pode manter um aplicativo maior ou crescente mais organizado, e também é algo que é muito simples de fazer. 36. Exibições de roteador com nome: Se voltarmos para o aplicativo principal, o arquivo do Vue. Dentro de um aqui temos uma visão de roteador. Até agora, analisamos o uso dessa visualização de roteador para alternar entre componentes. Além disso, como podemos usar os componentes de visualização de roteador para exibir rotas filho dentro dos componentes acima. Também podemos usar vários componentes de rotas de visualização dentro do nosso aplicativo. Isso é para que possamos exibir várias exibições na mesma página, vez de apenas alternar entre componentes únicos. Por exemplo, dentro deste aplicativo o arquivo Vue, temos este componente de visualização de roteador para alternar entre o conteúdo principal. No entanto, não estamos restritos a apenas uma tomada, podemos adicionar quantas visualizações de roteadores quisermos, dando-lhes um nome. Nós já configuramos alguns componentes de informação que usamos no sobre. Temos o guia de encomendas, a informação de entrega e o histórico. Isso também seria ideal para ser exibido na página inicial usando uma nova exibição do roteador. Vamos configurar isso logo abaixo da nossa visão de roteador atual. Vou usar isto para mostrar estes três componentes. Vamos configurar uma div com a classe de info_block_wrapper. Agora, para exibir nossos componentes de informação gratuitos, podemos adicionar mais visualizações de roteadores, mas desta vez com o atributo name. A visualização do roteador com a marca de abertura e fechamento. Dentro da tag de abertura, podemos então adicionar o nome e queremos definir este nome para ser guia de ordenação. Em seguida, duplique isso mais duas vezes. O segundo será para entregar, e o terceiro será para a história. Salve isso. Se voltarmos para o navegador e clicarmos em nosso link “Home”. Não vemos nenhum componente mostrado atualmente na tela, isso é porque primeiro precisamos adicioná-los às nossas rotas. Então vamos passar para o nosso novo arquivo routes.js. Uma vez que nossos links home serão agora exibindo vários componentes, precisamos alterar o componente da propriedade apenas aqui, ter um s no final para fazer esses componentes. Remova o link inicial. Isso agora vai levar em um objeto onde podemos adicionar os componentes como pares de valor de chave, assim como fazemos ao registrar um componentes dentro da instância view. Primeiro, adicionamos um componentes padrão, que vai ser o lar. Este é o componente renderizado na visualização do roteador sem nome. Este é o original que tínhamos aqui no topo. Isso irá mantê-lo exatamente como tínhamos antes com os componentes domésticos. Podemos então configurar nossas exibições gratuitas de roteadores logo abaixo de todas com nomes correspondentes. O primeiro foi o guia de pedidos. Queremos mapear isso para que os componentes sejam chamados guia de ordenação. O próximo foi para entrega. Queremos mapear isso para que os componentes sejam chamados de entrega. O terceiro foi para a história. Vamos ver isso no navegador. Voltar para a página inicial. Nossos componentes gratuitos agora tomaram o lugar de nossas exibições de roteadores nomeadas. Além disso, os componentes home padrão estão tomando o lugar da exibição do roteador, que não tem um nome. Isso também precisa de um pouco de trabalho com esses estilos também quando criamos o guia de pedidos, entrega e componentes de histórico. Se olharmos para estes, podemos abrir qualquer um destes. Dentro do modelo, adicionamos uma classe de info_block como o wrapper, e também uma classe de info_block_contents, que é para o título e também para a imagem. Se voltarmos para o app.vue. Nós também cercamos esses componentes livres em uma classe chamada info_block_wrapper. Podemos segmentar essas classes no CSS, começando com a menor visualização de tela. Na parte inferior, podemos direcionar o info_block_wrapper. Este é um invólucro para as nossas tomadas gratuitas. Vou definir o tipo de exibição para ser flexível. Podemos definir a direção flexível para ser coluna nas telas menores. Então estes estão empilhados. Em seguida, o info_block individual. Este é o invólucro para cada componente. Eu quero dar a isso uma cor de fundo, que vai ter o valor de f1e6da. Então margem, então 10 pixels na parte superior e inferior para adicionar algum espaço e zero na esquerda e direita, algum preenchimento no interior da div de 10 pixels. O número pode direcionar os blocos de informações e o cabeçalho de nível 3. Se voltarmos ao guia de pedidos, este é o título no topo de cada bloco. Info_block, podemos direcionar os títulos de nível 3. Tudo o que vou fazer aqui é definir a linha de texto para estar no centro. Também podemos segmentar o info_blocks_content. Esta é a seção logo abaixo do título, detectaria filho também a imagem. Depois de definir isso para ser um tipo de exibição ou flexível, para que possamos alinhar os itens no centro. Então, finalmente, para as telas pequenas, eu vou definir a imagem info_block. Tudo o que quero fazer aqui é restringir a largura para 30 por cento. Vamos dar uma olhada nisso no navegador. Podemos reduzir isto para uma visão mais pequena. Isso parece um pouco melhor em dispositivos móveis agora. Se esticarmos o navegador para o tamanho da área de trabalho. Agora precisamos adicionar uma consulta de mídia para direcionar isso. Vou configurar o alvo de consulta de mídia com a largura mínima de 900 pixels. Nossa tela de mídia. Além disso, a largura mínima é de 900 pixels. Vamos começar com o info_block. Definindo a largura para ser 100 por cento. O info_block_wrapper, que é o wrapper principal para todos, livre de todos os componentes. Podemos definir a direção flex ou substituir a direção flex da coluna para ser linha para que todos estes alinhados. Em seguida, se dermos uma olhada dentro do navegador, agora temos essas configurações em toda a linha usando a caixa flexível. Mas queremos um pouco de espaçamento entre cada um. Para fazer isso, vou selecionar este “Info_block” no meio. Podemos mirar este usando o nth filho. Voltar para o CSS e direcionar o info_block e, em seguida, os dois-pontos. Podemos direcionar o nth filho, que selecionará qualquer um desses que passarmos. Queremos selecionar o segundo que está no meio. Então tudo o que vamos fazer é definir alguma margem para 10 pixels. Dê um salvamento a isto. Agora, isso é adicionado um espaçamento de 10 pixels em torno desses componentes. Em seguida, dentro desses três componentes, vamos ter o texto na imagem empilhado verticalmente. Podemos fazer isso definindo a direção flexível para ser coluna e também alinhá-los no centro. Vamos para o info_block_contents. Podemos definir a direção flexível para ser em uma coluna e também alinhar os itens no centro. Salve isso. Em seguida, a imagem. Vou dar a isto uma largura máxima de 100 por cento. A imagem info_block, a largura máxima, vai restringir a 100 por cento. Finalmente, vou usar a caixa flexível para redefinir a ordem de origem. Então, estes são alternados movendo a imagem acima do texto no segundo filho. Vamos usar o mesmo seletor que usamos antes de usar o nth-child. Podemos adicionar isso. Mas desta vez também queremos segmentar a imagem. Podemos redefinir a ordem de origem definindo a ordem da imagem para ser negativa. Salve isso. Nossos componentes gratuitos e agora alternado na tela maior. Se reduzirmos de volta para a exibição móvel, ordem de origem permanece exatamente como estava, pois isso é definido dentro de uma consulta de mídia. Este é agora o fim da nossa seção de roteamento. Você pode ver que há muito mais no roteamento do que apenas alternar entre páginas. Espero que esta seção tenha dado uma boa idéia do que está disponível. Na próxima seção, vamos passar para manter o gerenciamento usando View x. 37. O que é o Vuex?: Ao trabalhar com projetos Vue.js, podemos gerenciar o estado do aplicativo de várias maneiras. Ao compartilhar um estado de passagem entre componentes, há várias maneiras de conseguir isso. Os dados podem ser passados de um filho para um componente pai usando Eventos Personalizados, e do pai, o filho passando adereços. Também podemos melhorar isso adicionando um Barramento de Eventos. Este Event Bus atua como uma única loja central, disse aos nossos estados e é basicamente um arquivo separado contendo uma instância de visualização, que podemos ter o nosso estado para, e importar para cada componente quando necessário. É uma ótima solução para aplicações de pequeno a médio porte. Mas um único arquivo como este, no entanto, pode rapidamente tornar-se realmente grande e mais difícil de manter para grandes projetos. Isso nos leva ao assunto desta seção, que é o UX. UX é um padrão de gerenciamento de estado mais biblioteca para gerenciar nossos estados, com o estado sendo basicamente os dados que são mantidos em nossos componentes. É ideal para gerenciar grandes projetos, e é escrito pela equipe de chamada Vue.js, então se integra perfeitamente em seus projetos Vue.js. Como o Event Bus, ele também atua como uma única barraca central para o nosso estado, mas tem alguns benefícios sobre o Event Bus. Por exemplo, permitir que você acesse uma única fonte para nossos estados. Ainda podemos dividi-lo em diferentes arquivos em módulos para organizar nosso código, e vamos dar uma olhada nisso em breve. Não usamos adereços e eventos com o Vue.ux. Usamos métodos diferentes que também abrangerão esses métodos dedicados, facilitando o rastreamento e o gerenciamento de alterações feitas em nossos estados. Use um Barramento de Eventos se vários componentes continuarem fazendo alterações no stall usando eventos personalizados, essas alterações podem ser difíceis de rastrear. Podemos não saber qual componente fez qual alteração, e isso pode causar problemas de atualização. Além disso, como veremos nesta seção, não só o Vue.ux atua como uma única fonte de dados para o estado do nosso aplicativo, mas também pode ser usado para coletar dados necessários de outras fontes. Nós o usaremos para manter nossos estados de componentes junto com nossos dados do Firebase. Isso torna nossa loja um único lugar conveniente para acessar todos os dados que precisamos. Com tudo isso sendo dito no entanto, se você construir em um aplicativo menor ou médio, Vue.ux nem sempre é a melhor solução. Muitas vezes, pode ser um caso de adicioná-lo quando você sente que é necessário ou quando outras soluções estão causando problemas. Agora que sabemos o que é Vue.ux, vamos começar a trabalhar em adicioná-lo ao nosso projeto. 38. Instalação e estrutura de arquivos: Se você quiser ler mais sobre Vuex, você pode ir para a página inicial, que é vuex dot vuejs dot org. Mas eu vou pular direto para colocar essa configuração dentro de nossos projetos. Obter a configuração do Vuex dentro do nosso aplicativo não é muito difícil. Se formos para a instalação, assim como quando instalamos o roteador, os links CDN disponíveis se você preferir, mas como usamos um NPM, eu vou instalar isso dentro do terminal. Vamos abrir o código do Visual Studio, quer fechar o servidor e, em seguida, instalar o comando que é npm i e, em seguida, o nome do pacote, que é Vuex. E então dê algum momento para instalar. Uma vez que isso é feito, podemos reiniciar o servidor de desenvolvimento com npm run serve. Podemos adicionar isso aos nossos arquivos e pastas. Agora, eles querem dizer imediatamente que o Vuex não impõe qualquer estrutura específica para todos os arquivos e pastas. Somos livres para lidar com isso exatamente como queremos. É comum nós têm uma pasta principal para os nossos estados dentro da pasta de origem chamada store. Vamos fazer isso agora. Vamos para a fonte, criar uma nova pasta, nomear esta loja. Então aqui dentro precisamos de um arquivo JavaScript principal, que eu vou chamar a loja dot js. Este será o arquivo principal da nossa loja, e pode ser qualquer nome que você quiser. Você também pode ver isso comumente chamado de ponto de índice js. Vou ligar para a minha nova loja para distingui-la de qualquer outro arquivo de índice. Em seguida, dentro de nosso arquivo de loja, precisamos importar ambos os módulos Vue e também os Vuex, então importar Vue do Vue e também importar Vuex da Vuex. Então, assim como quando instalamos o roteador, podemos adicionar Vue dot use para tornar o Vuex disponível em todos os nossos arquivos ou módulos. Esta próxima seção também deve parecer familiar, a partir de quando adicionamos o roteador. Precisamos adicionar uma nova loja Vuex, e também exportar isso para que ele esteja disponível em nossos arquivos, então exporte loja const e defina isso para uma nova loja Vuex dot, capital S. Dentro daqui nós passamos em um objeto e está dentro deste objeto onde podemos definir qualquer estado inicial. Por exemplo, se você tivesse um jogo em que atualizássemos a pontuação do jogador, poderíamos adicionar uma propriedade de estado aqui para a pontuação e inicialmente defini-la como zero. Em seguida, um ou mais componentes podem atualizar a pontuação durante o jogo. O outro arquivo que eu quero adicionar também é o ponto js principal, então vamos abrir isso. Precisamos atualizar isso em nosso arquivo principal, assim como fizemos com o roteador. Primeiro precisamos importar a loja. Isso é chamado export e o caminho do arquivo é ponto barra no armazenamento. Em seguida, o nome do arquivo que é armazenar também. Role para baixo, podemos então registrar nossa loja dentro de nossa instância vista. Logo abaixo do roteador. Vou adicionar isto aqui, seguido de uma vírgula. E esta é a nossa loja agora registrada com o Vue, de volta e instale dot js. Vou configurar as coisas adicionando um estado inicial objetos. Aqui dentro. Todo o objeto state funciona um pouco como a propriedade view data, onde podemos configurar nossas variáveis e atualizá-los a partir de nossos arquivos. Com isto tudo pronto, vou deixar este vídeo aqui. À medida que passamos por esta seção. Haverá muito mais arquivos e pastas adicionados e o baixo mais adicionado à barraca. Mas por enquanto, esta é a configuração inicial e registrado para ser usado e começará a acessar dados de nossa loja no próximo vídeo. 39. Estado inicial e acessando a loja: Com a nossa nova loja Vuex agora configurada, é hora de adicionar algum estado à nossa loja e ver como podemos acessá-lo a partir de nossos componentes. Pouco antes de fazermos isso, temos um erro no console, e isso ocorre porque nosso Vuex precisa de um V maiúsculo para marcar sua importação no topo. Agora começamos com a recuperação de dados de pizza de nosso banco de dados Firebase junto com nossos pedidos de clientes. Até configurarmos isso, no entanto, vou simular isso. Se formos para os componentes menu.vue, aqui dentro, se descermos para nossa propriedade de dados, temos nossos dados de exemplo aqui, que é obter itens de menu. Vou cortar toda esta secção dos nossos componentes e depois levar isto para a nossa loja. Certifique-se de pegar a seção certa. Obter itens de menu, deixando apenas as cestas e também o texto da cesta em nossa loja. Agora podemos colar isso em nosso objeto de estado. Então eu só vou mudar o nome para simplesmente ser itens de menu. Isso significa que nossos dados são agora retirados para os componentes e colocados dentro de um armazenamento central para qualquer componente ter acesso. Como esperado, se formos para o navegador e, em seguida, passar para os componentes do menu, clique no link do menu aqui, o menu está faltando porque removemos os dados e colocamos em um arquivo diferente. Como acessamos essas lojas de dentro desses componentes? Bem, se voltarmos aos nossos componentes menu.vue, agora podemos ter acesso à nossa loja dentro do valor calculado. Vou chamar isso de itens do menu, como tínhamos antes. Dentro aqui, vamos devolver este ponto $ símbolo loja. Então, do nosso arquivo da loja, vamos acessar os objetos de estado, e o estado da pizza, que chamamos de itens de menu. Este nome de itens de menu get, também corresponde ao nosso loop. Se rolarmos nosso loop, deslizar acima da cesta, e aqui estamos nós, dentro do menu, temos itens de menu. Só precisamos adicionar uma vírgula após os valores calculados. Diz isto e volta ao nosso menu. Agora temos os dados do menu no lugar. Esses dados agora são acessados de nosso armazenamento central, em vez de serem restritos a um único componente. Quando os dados instalam atualizações, este componente e quaisquer outros, que acessam neste menu dados também serão atualizados ou renderizados novamente. Se fizermos uma mudança rápida para um nome de pizza de volta no store.js, vamos descer e mudar o nome deste, dá isso um salvamento, de volta ao nosso menu. Agora vemos que isso é atualizado imediatamente. Finalmente, também acessamos os mesmos itens de menu a partir da tela de administração. Vamos ao Admin.vue. Podemos configurar um valor calculado, assim como fizemos dentro do menu. Configurar nosso objeto e adicionar a vírgula logo depois. O nome novamente vai ser o mesmo de obter itens de menu e vamos retornar nossa loja porque acessar este ponto $ símbolo loja, nossos objetos de estado, em seguida, novamente, itens de menu. Role para cima. Agora podemos usar isso para criar nossos dados dinâmicos dentro da tabela de menu, mas do topo, logo abaixo do título do menu, se procurarmos o corpo da tabela, podemos criar um V para loop. Vamos percorrer os itens do menu get. Então item em obter itens de menu. Também podemos vincular uma chave e a chave vai ser igual ao ID do ponto do item. Agora podemos usar este item para substituir o valor codificado de margarita. Dentro das chaves duplas, podemos acessar o item.name e eles devem ser repetidos já que é um loop para todos os três itens, dentro de nossa loja. Para o administrador. Vamos rolar para baixo até o nosso menu. Agora vamos ver nossos itens gratuitos retirados da nossa loja central. Esta é uma maneira de acessar dados de nossa loja. Em seguida, vamos olhar para outra maneira possivelmente melhorada, que é usando getters. 40. Melhorando o acesso à loja com getters: No último vídeo, acessamos nossa loja central diretamente usando um $store.state.MenuItems, assim como você vê aqui. Há uma maneira melhor de fazer isso, no entanto, e isso é adicionando getters à nossa loja. Como esse nome sugere, nós os usamos também para aumentar os dados de nosso armazenamento central. Mas você já pode estar pensando que já estamos recebendo dados de nossa loja. Então, por que estamos usando um getter? A razão é porque você pode fazer muito mais com getters, quando acessamos o estado antes de usar diretamente $store, sim temos os dados que queríamos de volta, mas como um exemplo. E se quiséssemos fazer algo um pouco mais complexo, como ordens de facção da loja e depois filtrar esses pedidos para mostrar apenas os pedidos que estão concluídos. Para fazer isso, depois de buscar os dados, precisaríamos executar essa ação de filtro dentro da propriedade computada de componentes. Se apenas um componente quisesse executar este filtro. Isso não é um grande problema. No entanto, se vários componentes acessarem os mesmos dados filtrados, teremos código duplicado através do nosso aplicativo. Para corrigir isso, usamos um getter para buscar os dados que precisamos da loja e, em seguida, executar qualquer ação que queremos, como um filtro ou cálculo. Em seguida, os componentes receberão os dados finais ou exatos que eles precisam. Eu acho que um getter é tão simples quanto adicionar estado à nossa dor. Se nos dirigirmos para este store.js, logo após nossos objetos de estado e rolar para baixo até o fundo, adicione uma vírgula e configure nosso objeto getters, assim como eu nosso estado. Em seguida, adicionamos o nome do nosso getter e eu vou chamar isso de “GetMenuItems”. Esta vai ser uma função que recebe o estado como um argumento. Em seguida, usamos o estado para acessar qualquer informação que quisermos. Então, queremos pegar o State.MenuItems de um pouco acima. Podemos então usar este getMenuItems getter dentro dos componentes do menu, vamos para lá “menu.vue”. Então tudo o que precisamos fazer, em vez de acessar nosso estado, vamos acessar nossos objetos getters e o nome era GetMenuItems. O outro getter que precisamos é obter o número de ordens que temos. Para isso, precisamos de uma matriz de pedidos dentro de nosso estado, então de volta aqui para armazenar, bem na parte inferior, logo após nossos objetos adicionarem um canto. Nós vamos definir inicialmente nossa matriz de pedidos para estar vazia. Isso está vazio no momento, mas mais tarde no curso vamos sincronizar essas informações com firebase, para puxar os pedidos do nosso banco de dados. Usando isso, agora podemos configurar um segundo getter, chamado Número de pedidos. Esta configuração assim como acima. Ele leva no estado como um argumento de nossa função e podemos acessar o state.orders. Como queremos que saibam o número de encomendas em vez do conteúdo, podemos acessá-lo com a propriedade do terreno. O número de pedidos faz parte da nossa tela de administração. Portanto, precisamos adicionar isso aos componentes de administração. Vamos até lá, até a propriedade do computador. Depois que eu receber itens de menu, podemos adicionar nosso número de pedidos onde vamos devolver isso. $store.getters.numberooForders. Além disso, enquanto estamos aqui, também podemos alterar os itens de menu get acima para também usar o getter. Então getters.getMenuItems. Agora podemos usar uma série de pedidos em nossos modelos. Se procurarmos as ordens atuais, temos um valor codificado de cinco. Dentro das chaves duplas, podemos acessar nosso número de pedidos. Dê isso um salvamento e desativação no admin, recarregue o navegador. Agora vemos que as ordens atuais está definido como zero. Como mencionamos no início deste vídeo, ao usar um getter, podemos fazer praticamente qualquer coisa que quisermos para os dados antes de passá-los para nossos componentes. Por exemplo, poderíamos fazer algo simples, como a terra mais estranha mais 10, e isso é atualizado dentro de nosso componente. Ou podemos fazer algo muito mais complexo, como formatar ou validar dados mesmo antes de atingir nossos componentes. Sabemos como acessar o estado de nossa loja. Agora é um bom momento para seguir em frente olhando para mutações que mudam o estado dentro de nossa loja. 41. Alterando o estado com mutações: Ao lidar com o estado até agora nesta seção, analisamos como recuperar o estado de nossa loja central, tanto diretamente quanto usando getters. Quando eu quero mudar o estado dentro da loja, e a maneira correta de fazer isso é cometendo uma mutação. As mutações simplesmente mudam os dados dentro da nossa loja. Eles funcionam de forma semelhante a quando omitimos um evento. Mas em vez de emitir dados para um componente, podemos fazer alterações na loja em vez disso. Além disso, as mutações seguem as regras de reatividade de visualizações. Isso significa que uma vez que usamos uma mutação para mudar os estados, todos os componentes que observam o estado serão atualizados automaticamente também. Dentro do menu no “Cesta”, temos este botão “Fazer pedido”, e também temos a matriz de pedidos vazia dentro da nossa loja central. Este seria um bom caso de uso para uma mutação para ser capaz mutar o armazenamento central empurrando o conteúdo da ordem. Quando clicamos no botão para esta matriz ordens. Assim como Getters, montamos nossas mutações dentro da loja. Então eu vou adicionar isso como um objeto separado por uma vírgula. Então é sobre mutações. Então podemos adicionar o nome da mutação. Esta mutação irá adicionar uma ordem. Então eu vou simplesmente chamar isso de “addorder”. A mutação aceita os estados passados para ele como o primeiro argumento, assim como acontece quando você esgueira-se getters. Em seguida, modificamos o estado como queremos dentro desta função de seta. Como exemplo, se nossos pedidos fossem um número de ordens exatamente como este, se definirmos isso como um, poderíamos então definir o estado, embora as ordens sejam mais um com ++. Agora, para chamar essa mutação, precisamos ir para nossos “componentes do menu” e adicionar um novo método. Então vamos para o “menu.view” e eu vou chamar esse método de “adicionar nova ordem”. Se dermos uma olhada para o botão “Fazer pedido” dentro da tag de abertura e quer adicionar um ouvinte “clique” e definir o sub para ser o nosso método chamado “AddNew ordem” role para baixo e podemos criar é logo abaixo. Dentro de nossos métodos, temos alguns. Então, logo após diminuir a quantidade, podemos adicionar novo pedido. Então a primeira coisa que precisamos fazer é acessar a loja. Assim como antes de fazermos isto com isto. $loja. Em seguida, precisamos confirmar a alteração usando o método commit. A mudança que cometemos é o nome da mutação que acabamos de criar na loja, que foi chamada de “addorder”. Passamos isso como uma string, e depois de adicionarmos a ordem, faria sentido limpar a cesta dentro de nossos componentes, definindo a cesta como uma matriz vazia. Esta cesta é logo acima dentro da propriedade dates, que esta matriz apenas aqui. Por isso, temos de limpar isto uma vez que o pedido tenha sido feito. Podemos fazer isso simplesmente com isso.cestas é igual a uma matriz vazia. Finalmente, também podemos adicionar uma mensagem para dizer que nosso pedido foi feito. Nós já temos uma propriedade de data de texto cesta. Basta explodir esta cesta, que atualmente nos diz que a cesta está vazia antes que um usuário adiciona uma pizza. Tudo o que precisamos fazer agora é mudar esses dados com uma nova mensagem. Portanto, este texto da cesta de parada será igual a “Obrigado, seu pedido foi feito”. A próxima coisa a fazer é verificar se o valor dos pedidos dentro da nossa loja foi aumentado a cada clique. Agora podemos colocar isso dentro do modelo de menu. Então eu só vou rolar até o final, e nós podemos adicionar isso em qualquer lugar dentro das chaves duplas para que ele possa acessar nossa loja, esta loja. Precisamos acessar o estado, as ordens, ou a outros projetos, e no menu, vemos o valor de um. Vamos criar uma nova ordem. pedido, teremos o valor de dois. Vamos tentar mais um e o valor de três. Esta é a maneira mais simples de cometer uma mutação. Nós, no entanto, queremos melhorar isso empurrando o conteúdo completo da cesta para a nossa matriz de pedidos, em vez de apenas incrementar o número. Para fazer isso, adicionamos o que é chamado de carga útil. Uma carga útil é um argumento adicional que passamos através da mutação, que contém os dados que queremos cometer. Você pode pensar nisso como adicionar argumentos a uma função, mas vamos passar algumas informações adicionais. Podemos fazer isso de volta no método “addneworder”. Vamos rolar para baixo até isso, e logo após “addorder”, você adiciona uma vírgula e então podemos adicionar a carga, que é o conteúdo de “this.basket”. Em seguida, no store.js, passamos essa carga útil para a mutação como um segundo argumento. Então agora, em vez de usar o estado sozinho, precisamos cercar isso dentro dos suportes. Passe os pedidos, o nome desta carga é “para cima”, mas é claro, é melhor ser o mais descritivo possível sobre os dados que você conterá. Agora, em vez de incrementar as ordens, agora podemos empurrar as novas ordens para o array. Podemos então usar o método push JavaScript, onde vamos empurrar as ordens, e também precisamos mudar isso de volta para uma matriz. Nos dá um salvamento e isso agora deve ser um trabalho de mutação. Se nos dirigirmos para o navegador e para o menu, vemos uma matriz vazia. Vamos tentar adicionar alguns itens de menu e fazer um pedido, e lá vamos nós. Aqui está a nossa margarita e o nosso pepperoni. Qual dos dois itens que adicionamos? Vamos tentar um novo. Faça o pedido, e vemos que a terceira pizza foi adicionada à nossa matriz. Tão grande. Agora podemos ver que a loja foi atualizada com o conteúdo da nossa cesta. Não parece muito bonito no momento, mas isso é facilmente corrigido mais tarde no curso. A principal coisa por agora é que agora você sabe como acessar com sucesso a loja central e também submeter as alterações de volta a ele. 42. O que são ações?: Até agora, analisamos o uso de getters para recuperar o estado de dentro da nossa loja central. Além disso, mutações, que acabamos de ver, cometem mudanças na nossa barraca. Mutações fazem seu trabalho perfeitamente bem, mas para ter uma coisa a ter em mente, as mutações devem ser síncronas. Não podemos adicionar nenhum código assíncrono dentro de uma mutação. Se você não tem certeza do que isso significa, com código síncrono, temos que esperar a tarefa termine antes de passar para a próxima. Temos uma tarefa assíncrona, não precisamos esperar que uma tarefa anterior termine primeiro. Estes podem correr um ao lado do outro. Faz sentido que as mutações funcionem de forma síncrona. No entanto, se múltiplas mutações acontecerem ao mesmo tempo, não seremos capazes de rastrear qual deles mais responsável por cada mudança de estado. Se estivéssemos executando um código assíncrono, não podemos dizer quanto tempo esse processo levará. Portanto, uma mutação que foi iniciada primeiro pode não necessariamente terminar primeiro. Ter uma mutação que funciona de forma síncrona significa precisa terminar completamente primeiro antes das próximas começarem, e isso torna o rastreamento muda mais previsível. É aqui que as ações entram. As ações podem conter código assíncrono e são um pouco como mutações. No entanto, as ações não mutam diretamente o estado, em vez disso, elas cometem uma mutação. Isso significa que ele terá as necessidades de executar código assíncrono, como solicitar dados de um servidor. Uma ação será usada sobre uma mutação. Podemos usar ações assíncronas ou não, e você pode até manter as coisas mais consistentes sempre passando por uma ação, se preferir, então esta é a teoria por trás das ações. Em seguida, vamos colocar isso em prática dentro de nossa aplicação. 43. Configurando o usuário com ações: Agora vou configurar uma ação para definir o usuário conectado atual. Este usuário será armazenado dentro de nossos estados. Vamos adicionar a propriedade de usuário atual para começar. Dentro do store.js, logo abaixo da nossa matriz de pedidos. O usuário atual, que vamos definir inicialmente como nulo. Isso será inicialmente definido como nulo até que um usuário esteja conectado e, em seguida, ele será substituído por um objeto contendo os detalhes do usuário. Eu ainda vou realizar a mudança de estado como uma mutação. Mas como mencionamos no último vídeo, usaremos uma ação para cometer essa mutação. Vamos primeiro configurar o nosso usuário apenas soprar ordem add, que vamos chamar de UserStatus, e queremos passar nos estados e também o usuário, que será nossa carga passado quando nós cometer esta mutação. Como uma função de seta, este payload do usuário será os detalhes do usuário conectado, se não o usuário será nulo. Aqui podemos adicionar uma instrução if para verificar se o usuário está logado. Se for verdade, vamos atualizar este state.currentUser com o valor de usuário. Se o usuário logout, também podemos atualizar o usuário atual também. Mas desta vez queremos definir o usuário para ser de volta para nulo. Esta é uma maneira de configurar isso com uma instrução if... else ou, alternativamente, podemos usar o operador ternário JavaScript para verificar se o usuário é igual a null. Se for, podemos fornecer uma condição onde definimos esta date.currentUser para ser nulo. Caso contrário, a alternativa é definir o usuário atual para ser igual ao usuário passado da carga útil. De qualquer forma é completamente válida e esta é a nossa mutação agora completa. Precisamos agora de definir a acção que vai chamar a isto. Adicionamos a propriedade actions ao que armazenamos. Assim como fizemos com as mutações das calhas. Nós configuramos isso como um objeto. Podemos chamar as mutações de status do usuário, tanto ao entrar quanto ao sair também. Vamos começar com o sinal em ação, que levará em dois argumentos. Esta função vai ser uma sincronização e este primeiro argumento que você passa em é o objeto de contexto, e o segundo é o usuário. Configurar a nossa função de seta. O objeto de contexto tem um método de commit. Podemos usar isso em um momento para desencadear nossa mutação. Bem, primeiro, se entrarmos no arquivo login.vue e para nossos métodos, já temos essa funcionalidade de login aqui. Vou levar isto para a nossa loja central. Se colocarmos todo o conteúdo entre entrar, a seção catch e também tentar fazer menos. Deixamos este aparelho encaracolado do lado de fora. Se voltarmos à nossa loja, agora podemos colar isso em nosso login. Se rolarmos para cima quando usamos o método de login e senha, que é do firebase, precisamos passar o e-mail e também a senha. Quando chamamos esta ação em breve, o payload do usuário conterá o e-mail e a senha, então precisamos alterar isso para o usuário. Ele conterá os detalhes do usuário. Isso vai conter nossas informações de usuário. Podemos armazenar isso dentro de uma constante chamada dados do usuário. Isso vai armazenar no valor de retorno da base de fogo e podemos usá-los para cometer nossa mutação logo acima. Agora eu tenho esses dados de usuário armazenados com você voltar da base de fogo. Agora podemos acessar nosso objeto de contexto, que nos permitirá acessar qualquer um dos métodos e propriedades na instância da loja. Por exemplo, podemos acessar nosso estado com o context.state, ou podemos acessar qualquer um dos getters acima, simplesmente assim. Queremos usar o método commit, mas também podemos simplificar isso usando a destruição do argumento ES6. Em vez de agarrar o contexto completo, tudo o que queremos fazer é puxar o método commit, que significa que podemos acessar isso diretamente pelo nome. O que exatamente queremos cometer? Onde queremos cometer uma mutação pelo nome do status do usuário. Vamos passar isto como uma corda. O segundo argumento será a informação do usuário, que temos de volta do firebase, que temos armazenado em dados do usuário e podemos acessar nossos objetos de usuário. Também usamos esta referência FireBaseAuth aqui também. Precisamos importar isso também no topo do arquivo. Precisamos importar isso como uma importação de nome. FirebaseAuth deixe-me localização do pacote é de../e, em seguida, firebase. Agora eu sei que isso pode parecer um monte de passos a tomar apenas para definir o usuário em nosso estado. Mas lembre-se que esta etapa de ação é adicionada, portanto, não temos restrições quanto ao uso de código assíncrono com essa ação. Tudo agora configurado, a última coisa a fazer é tentar. Fazemos isso despachando a ação de nossos componentes e é isso que veremos fazer a seguir. 44. Emitindo ações: No último vídeo, moveremos o código de login dos componentes login.view para nossa loja central. Agora a ação está completa. Precisamos despachá-lo de nossos componentes de login, passando o e-mail e a senha do usuário para que ele funcione. Eu vou até o componente login.view e, em seguida, role para baixo até nosso método de login. O método de inscrição está atualmente vazio e vamos começar a trabalhar nisso agora. Podemos começar removendo a palavra-chave assíncrona. Isso ocorre porque a função é marcada como assíncrona no armazenamento central e, em seguida, dentro aqui, vamos começar criando um objeto de usuário que vai armazenar nosso e-mail e senha. Vamos configurar o e-mail a partir da propriedade data, que você pode acessar com o e-mail da loja e também a senha está disponível na propriedade data também. A próxima coisa a fazer logo após o nosso objeto de usuário é despachar em ação, passando os detalhes como uma carga útil. Então acesso I nossa loja que vamos importar em apenas um minuto. Em seguida, precisamos chamar o método de despacho, que vai tomar em nome da ação. O nome da ação é SignIn e, em seguida, passamos o payload que é o nosso objeto de usuário. é bom o suficiente para não precisarmos mais da nossa referência Firebase, já que você moveu isso para um arquivo diferente. Colocado no lugar, precisamos importar nossa loja. O caminho do arquivo como uma string é../. Precisamos entrar em nossa loja, e então o nome do arquivo é nossa loja. Agora precisamos verificar se este é o trabalho em, exibindo o valor de CurrentUser em nosso aplicativo. Lembre-se CurrentUser era o nome de um pedaço de estado, que definimos no store.js. Este é um CurrentUser que é definido como null como padrão e sabemos de anteriormente na seção, que para obter o conteúdo de nossos estados. Precisamos usar getters. Vamos definir o servidor para o nosso CurrentUser. Dentro do getter há objetos separados por uma vírgula. Vou chamar isso de CurrenUser e passar em nossa função, que pega o CurrentUser do estado. Agora teremos o nosso “getter”. Vou adicionar isso a uma propriedade de computador do nos componentes admin.view, então role para baixo até JavaScript. Agora você pode adicionar isso dentro da seção computada. O nome de CurrentUser. Nós vamos retornar o valor, que é a partir deste. $store, acesse o objeto getters e o CurrentUser. Em seguida, dentro do nosso modelo, podemos produzir o valor em qualquer lugar em nosso código como um teste. Eu estou indo para ir até o log in como seção, e apenas saída isso dentro das chaves duplas. Veja este contexto funciona fazendo login e vendo nossos objetos de usuário. Vamos ao nosso administrador, onde podemos fazer login. Role para baixo, no momento não estamos logados como ninguém. Vamos fazer login, usando nosso e-mail e senha configurados dentro de um firebase, faça login. Agora, se rolarmos para cima, veremos todos os detalhes do usuário que é mantido para o nosso CurrentUser dentro de um firebase, mas não precisamos de todas essas informações dentro de nosso aplicativo. Vou filtrar essas informações de uso para exibir somente o e-mail do usuário conectado atual. Podemos ver dentro deste objeto há uma chave de e-mail dentro aqui e apenas para retornar este endereço de e-mail, podemos fazer uma pequena alteração para a nossa mutação dentro do nosso store.js. Tudo o que você vai fazer é definir o CurrentUser dentro do UserStatus. Vamos definir o CurrentUser para ser igual a user.email. Isso irá pegar o endereço de e-mail dos objetos do usuário. Vamos descer e entrar mais uma vez, clicar em “Entrar”, rolar para cima e agora temos apenas o endereço de e-mail conectado. Nós também precisamos mover sobre o método de sair para a loja também, dentro do admin.view onde temos nosso método de sair. Podemos cortar o conteúdo e levar isto para a nossa loja. Então, saia descreva todo o conteúdo. Podemos levar isso para o nosso store.js, que vai ser uma ação. Nós podemos adicionar isso para encher o SignIn, então separados por uma vírgula, isso é chamado SignOut, que eu vou adicionar como uma função assíncrona. Mais uma vez, podemos destruir nosso método de commit e configurar o resto de nossa função e, em seguida, colar no conteúdo. Será novamente usando esta ação para confirmar o método de status do usuário e uma vez que estamos logout, queremos que o usuário seja nulo. Então, logo após a seção de corte, vamos confirmar o nome da nossa mutação, que é o UserStatus, e definir a carga como nula. Então agora temos nossa ação de SignOut tudo agora configurado, agora podemos despachar isso no admin.view. Vamos para o nosso método de inscrição onde poderíamos o conteúdo fora antes. Dentro daqui vamos acessar a estrela que importará em um momento. Podemos chamar a Central. No nome da ação que queremos despachar é SignOut. Podemos então substituir o nosso impulso firebase logo acima com a nossa loja e o caminho do arquivo é../. Podemos acessar a pasta da loja e, em seguida, o arquivo da loja. Salve isso nos projetos. Não vemos nenhum detalhe, então vamos entrar. Role para cima e temos o e-mail do usuário conectado, clique em “Sair”. Agora vemos estes move o e-mail do usuário da tela. Então, nosso método de inscrição ainda é um trabalho, mas desta vez ele é colocado em nossa loja central. Estamos fazendo um bom progresso com o Vue X e também com o nosso projeto. Vue X pode parecer um pouco confuso no começo. É apenas algo que se torna mais claro com a prática. Você já viu a maioria dos conceitos centrais do Vue X. Então não há muito mais para aprender. Muito do que cobrimos para o resto desta seção é focado em simplificar nosso código e torná-lo mais organizado. 45. Mapeamento de getters: Agora sabemos como usar getters para acessar o estado de nossa barraca. Em seguida, adicionamos esses getters como propriedades computadas assim como aqui dentro dos componentes de administração, para nos permitir mantê-los atualizados se o estado muda. Isso funciona completamente bem, mas há uma maneira de simplificar esse código, que será útil se tivermos muito mais getters que você deseja configurar. Podemos fazer isso usando MapGetters, que é um auxiliar fornecido pela Vuex. Para usar isso, primeiro precisamos importar isso da nossa biblioteca Vuex. Na parte superior de nossos scripts, podemos importar como um mapeGetters de importação nomeado, que é do módulo vuex para que não precisamos do caminho do arquivo. Podemos então adicionar MapGetters aos nossos objetos de propriedades computadas. Dentro daqui podemos usar os três pontos, que é o operador de propagação ES6, que nos permite misturar esses getters com quaisquer propriedades de computador existentes que você já tenha. MapGetters leva em uma matriz na qual adicionamos os nomes dos getters que você deseja usar. Os getters que você deseja usar são simplesmente listados abaixo. Temos; obter itens de menu que foram adicionados como uma string separada por uma vírgula, nós também temos número de ordens e o terceiro é o usuário atual. Agora podemos excluir as propriedades computadas existentes. Dê isso para salvar e vá para o navegador. Podemos testar se isto está a funcionar bem. Vamos rolar para baixo até o nosso menu. Nós temos os itens de menu, então obter itens de menu ainda está funcionando. Podemos testar o usuário atual está trabalhando também por login. Role para cima e vemos o e-mail logo ali, que significa que tudo está funcionando bem agora. Não há muito tempo, costumávamos receber uma mensagem de erro ao usar o operador de propagação e precisávamos adicionar um plugin Babel adicional. Isso agora não é mais o caso com a versão mais recente do Vue CLI. Para terminar isso agora, podemos voltar para o Visual Studio Code e repetir isso nos componentes do menu. Podemos importar o ajudante de Vuex na parte superior do nosso script, que foi MapGetters de vuex e rolar para baixo para o nosso computar sua ação. Poderíamos remover itens de menu get, e substituir isso por MapGetters. Lembre-se que isso leva em uma matriz e o nome da string foi obter itens de menu. Também podemos adicionar mais getters no futuro, se quisermos, mas por enquanto vamos salvar isso e passar para o menu. Clique no link do menu, e nosso menu agora ainda funciona. Se como eu, você foi visto atualmente um array vazio dentro das cestas, quando ele está vazio, nós também podemos remover este código de anteriormente. Se você passar para o menu.view, podemos rolar para cima para o nosso modelo, e não vou remover isso logo abaixo do nosso texto cesto onde eu vou colocá-lo. estado. Ordens. Eu deveria remover isso, e nosso cesto agora está atualizado. Usando o ajudante MapGetters é uma maneira útil de organizar nosso código e os benefícios se tornam ainda maiores à medida que adicionamos mais getters à nossa aplicação. 46. Dividindo nossa loja em arquivos separados: Ter todos os nossos estados, tanto do aplicativo quanto de fontes externas, como o Firebase dentro de nossa loja central pode ser conveniente. Além disso, como seria de esperar, ele pode ficar bastante lotado à medida que nossa aplicação cresce com todas as ações, mutações e getters em um só lugar. Felizmente, a Vuex não restringe a forma como estruturamos a nossa loja. Podemos dividi-lo em vários arquivos para tornar nosso código mais organizado e sustentável. Neste vídeo e também no próximo, vou mostrar-lhe algumas maneiras diferentes de organizar sua loja e também como usar módulos. Claro, você também pode vir acima com sua própria maneira preferida também. A primeira maneira que vou cobrir é dividir nossas ações, getters e mutações em seus próprios arquivos separados. Esses três novos arquivos também viverão na pasta da loja. Vamos até a nossa loja dentro da barra lateral. E podemos criar um novo arquivo para cada um deles. Os primeiros são actions.js, o próximo é para o getters.js e o terceiro é para as mutações. Vou começar citando nossas ações do arquivo store.js principal e colando-as dentro de nosso novo arquivo de ações. Então, aqui dentro, vamos procurar por nossas ações e podemos remover tudo dentro da cinta encaracolada circundante. Eu vou sair e também assinar, deixando apenas as chaves em torno disso. Retire estes e, em seguida, vá para o actions.js. Podemos colá-los, e também precisamos exportá-los como uma constante. Então podemos importá-los dentro da nossa loja principal. Então, o primeiro de entrar, podemos exportar isso como uma constante. Como agora não faz mais parte do objeto do método, também precisamos transformar isso em uma função autônoma. Podemos adicionar um igual após o nome da função. Podemos repetir isso também para o sinal de saída logo abaixo. Então exporte const, substitua os dois pontos com iguais. Também precisamos importar nosso FireBaseAuth também, no topo. Esta é uma exportação de nome. Então FirebaseAuth e isso é a partir do caminho do arquivo de ponto-ponto barra e, em seguida, firebase. Se rolarmos para baixo, uma vez que estas também agora funções autônomas, só precisamos remover a vírgula separando o login e sair. Podemos fazer exatamente o mesmo se você tiver mais ações, e adicionaremos mais ações neste projeto mais tarde. Por enquanto, porém, precisamos importar isso de volta para o nosso store.js, onde acabamos de removê-los. Vamos começar pelo topo. Podemos remover nossas importações do firebase, e em vez disso poderíamos substituir isso por uma estrela, que usamos para importar todo o conteúdo de nosso novo arquivo em vez de um único membro. Isso importará todas as nossas ações do nosso arquivo de ações. Este nome de ações depende de nós, mas este é simplesmente o nome que usamos para se referir ao objeto de importação. Algumas ações fazem sentido. Isso está na mesma pasta, então simplesmente ponto barra e, em seguida, ações. Podemos então ir até a parte inferior do arquivo onde temos nosso objeto ações. Podemos remover os dois pontos e as chaves, deixando uma referência às ações que acabamos de importar. Agora podemos testar esta ação ainda está funcionando fazendo login e saída. Assim, ainda vemos o e-mail do usuário no admin. Vamos passar para encaminhar barra admin, rolar para baixo até a parte inferior, entrar. Pressione o botão “Entrar”. Em seguida, se deslocarmos para cima, veremos o e-mail do usuário conectado. Clique em “Sair” e ambas as funções do arquivo ainda parecem funcionar. Então nós só precisamos fazer exatamente o mesmo para nossos getters e mutações. Este é definitivamente um desafio que eu acho que você pode fazer sozinho. Basta seguir o mesmo processo, movendo as mutações e os getters para seu próprio arquivo, assim como fizemos com as ações. Então, pause o vídeo e dê uma chance se você se sentir confiante em fazê-lo. Vou começar de novo nos “getters”. Vá para o store.js. Podemos pegar todos os três de nossos getters, sobre o nosso novo arquivo, colá-los em, exportar const, todos os três. Lembre-se, uma vez que estas são agora funções autônomas, precisamos substituir os dois pontos por um igual, vez que estas não são mais parte de um objeto. Nós também precisamos remover as vírgulas separando cada um e, em seguida, podemos importá-los de volta para o nosso store.js. Assim como antes podemos remover o objeto apontando para uma referência getters, que agora podemos importar no topo, substituir os getters, e então o mesmo para as mutações. Aqui temos o AddOrder e o UserStatus. Vamos remover os dois. Também podemos remover um objeto enquanto estivermos aqui no novo arquivo de mutações. Vamos adicionar estes em, exportar const, adicionar os iguais. Também o mesmo para o segundo, adicione os iguais e também remova a vírgula. Se você ainda tiver algum código comentado, também podemos removê-lo. Isso não é mais necessário. De volta à nossa loja. Podemos importar isto. Estas foram as mutações. Também altere o caminho do arquivo. Então é isso. Agora dá a este um “Salvar” e passar para os projetos. Tudo ainda funciona como normal. Vamos testar o administrador. Tudo parece bem. Então esta é apenas uma maneira de estruturar nosso código Vuex. Bem, você já pode ver como isso pode nos beneficiar à medida que o aplicativo cresce. Em seguida, vamos cobrir módulos, que é outra maneira útil de organizar o código dentro de nossa loja Vuex. 47. Usando módulos: Vuex também nos permite organizar nosso código em módulos. Descobrimos separar nossas ações, getters, nossas mutações nos próprios arquivos, o que foi uma melhoria. Mas podemos melhorar ainda mais as coisas agrupando funcionalidades relacionadas. Por exemplo, tudo o que está atualmente em nossa loja pode ser dividido em três grupos. Está ainda relacionado ao nosso menu, aos pedidos ou aos nossos utilizadores. Assim, podemos organizar nosso código nesses módulos gratuitos. Vou fazer isso na pasta de estilo. Aqui dentro podemos criar uma pasta de módulos, para armazenar nossos novos arquivos gratuitos. Isso também vai ser arquivos JavaScript. Então, o primeiro é para a funcionalidade do menu. Ainda dentro dos módulos criamos o orders.js e, finalmente, os usuários. Certifique-se de que estes todos aninhados dentro da nova pasta módulos e, em seguida, podemos começar com o nosso menu. Dentro daqui podemos adicionar todos os getters estado, mutações e ações que estão relacionados ao nosso menu e armazená-los dentro de uma constante. Então podemos configurar o estado como um objeto. Podemos fazer nossos getters, as mutações. Então, finalmente, as ações. Vou começar neste arquivo adicionando nossos itens de menu de estados, que atualmente temos um bom tall.js. Aqui dentro, o estado tem nossos itens de menu, que é um objeto. Vamos localizar a chave de fechamento. Vou mover tudo para dentro daqui. Deixando as ordens são e também o usuário atual. Cole estes nele para o nosso menu.js dentro de nossos objetos estados. Havia dois pedaços de estado em nossa loja estão relacionados com os pedidos e o usuário. Então, adicione-os ao próprio módulo em breve. Em seguida, vou pegar os itens de menu get, que é um getter do nosso arquivo guesses.js. Vamos cortar essa linha de novo. Mais de dois estão relacionados com os mais de dois módulos. Podemos pegar o primeiro. Vá até os getters é enfrentar isso. Esta função também está agora em nosso getters objeto dois. Precisamos retornar isso de volta a um método alterando igual a dois pontos. Vírgula também pode remover a caixa x. Não temos nenhuma mutação para adicionar, e adicionaremos algumas ações a este arquivo mais tarde. Quando x precisa exportar todas essas constantes, que possamos usá-las em nossos arquivos. Temos nossos estados, temos nossos getters, mutações e ações. Então não podemos exportar padrão, um objeto que irá conter essas quatro variáveis. Então estado, mutações, getters, e finalmente, as ações. Como no último vídeo, eu encorajaria você a completar os pedidos nos módulos do usuário por si só. Importa se você estragar as coisas. Vou continuar até isto agora. Podemos sempre comparar o código no final. Lembre-se de dois para cada cópia funcional em nossos módulos, precisamos substituir os iguais por dois pontos, assim como vimos aqui. Vamos agora passar para as ordens. Este novo módulo. Podemos criar uma constante de estados. Podemos criar nossas mutações, os getters, as ações e, finalmente, exportar padrões de objetos para essas quatro variáveis. Sem fio está vazio, só mudou isso. Vou selecionar tudo e copiar e colar isso dentro do users.js. Então podemos começar a trabalhar com nossas ordens. Primeiro de tudo, dentro dos estados, podemos pegar qualquer estado relacionado às ordens do store.js. Nossas ordens são inicializadas como uma matriz vazia. Vamos remover isto, isto é interestadual. Temos mutações ou pasta de mutações, que é a nossa adição à ordem. Remover esta base é a mesma, lembre-se de remover as exportações e também definir isso de volta para ser dois pontos. Nós também temos um getter, que é o número de pedidos. Remova isso e cole isso em nosso módulo. No momento, não temos nenhuma ação. Então, por enquanto, podemos salvar este arquivo e também os getters. Podemos começar a trabalhar no módulo users.js. O topo para o estado que temos o usuário atual que você pode pegar de nossa barraca, que atualmente está definido para saber. Podemos adicionar este final próximo passo para as mutações, temos o status do usuário. O mutations.js, pegue todo o conteúdo e cole isso em um objeto de parede, remova nossa exportação, configuração, nossos dois pontos e até nossos getters. Há um getters que precisamos para este arquivo, e isso é para obter o usuário atual do nosso arquivo getters.js. Vamos remover isso, remover nossas exportações e os dois-pontos, e até as ações para as ações relacionadas ao usuário, temos o método de login. Vamos pegar isso do nosso actions.js. Nós também podemos pegar o sinal para fora enquanto aqui também. Vamos pegar essas duas fases nele. Então usarei o módulo como sempre. Podemos remover as exportações em dois pontos. Também precisaremos separar esses dois com uma vírgula. O mesmo design no, essa ação também usa o firebase desligado. Precisamos pegar isso também do nosso arquivo de ações e adicionar isso ao nosso módulo de usuários. Certifique-se de que todos os nossos arquivos estão agora salvos. Eu conheço o arquivo Thom Mayne store.js. Agora precisamos importar nossos novos módulos gratuitos. Também podemos remover nossos getters, mutações e ações. Vou importar nossos muitos módulos do caminho do arquivo de./ para a pasta de módulos e o menu. Essa é a nossa decisão de mais vezes. Esta é para as ordens, ambas as ordens. Em seguida, o último foi para os usuários, role para baixo até nossos objetos de loja. Podemos remover nossos estados. Na verdade, podemos remover tudo de dentro daqui e depois substituí-los por nossos módulos, que é um objeto, mas vamos passar nas ordens do menu e também os usuários. Também para limpar as coisas, vou remover nossas ações, getters, nossos arquivos de mutações. Não precisamos mais deles dentro de nossos projetos. Mas você pode precisar deles para referência, se preferir. Na verdade, pode ser melhor usá-los para estado não relacionado que não pertence a um módulo próprio. Agora vamos salvar este arquivo e passar para o nosso aplicativo. Quanto mudou o caminho do arquivo. Vou usar este arquivo, o que significa apenas alterações para um duplo../sobre os projetos. Vamos testar os itens do menu para começar. Todos eles mostrados na tela. Podemos tentar fazer login. O administrador para baixo, onde podemos adicionar nosso e-mail e senha. Ainda podemos entrar e também sair. Isso parece estar tudo funcionando, mas desta vez usando módulos. Nós também voltaremos a esses módulos na próxima seção e adicioná-los à medida que aprendemos a manter os dados de uma loja em sincronia com o Firebase. 48. Associando o Vuex ao Firebase: Vou começar esta seção adicionando ligações Firebase ao Vuex. Agora que temos o Vuex adicionado à nossa aplicação, agora temos um lugar centralizado para todos os nossos dados e nosso estado. Nesta seção, nós também estaremos ligando nossa porta Vuex para Firebase. Embora o Vuex possa ser um local central conveniente para enviar e recuperar nossos dados, ele não é um armazenamento de dados persistente. Isso significa que se recarregarmos o aplicativo, todas as alterações feitas na loja serão perdidas. Para corrigir isso e garantir que nossos itens de menu e pedidos sejam armazenados permanentemente, vou manter a loja Vuex sincronizada com o Firebase. Faremos isso com um pacote chamado Vuexfire, e este pacote é mantido pela equipe VJS chamada, e permitirá que nossa loja central Vuex seja mantida em sincronia com nossos dados Firebase. Ele faz isso ouvindo nosso banco de dados Firebase e , em seguida, comunicando mutações para mudar nosso estado para corresponder. No momento, se entrarmos no nosso administrador, podemos adicionar uma nova pizza aqui dentro. Podemos adicionar isso, e podemos ver que isso não é adicionado ao nosso menu, ou se formos para os componentes do menu, não vemos isso adicionado lá também. Isso é porque se formos para os módulos da nossa loja. Então vamos para o menu.js e, em seguida, até o nosso estado. Aqui dentro só temos nossos dados falsos. Então agora será um bom momento para remover isso e substituir isso por um array vazio. Então eu vou remover todo o conteúdo de dentro de nossos estados, podemos deixar o nome de itens de menu, mas desta vez eu vou definir isso igual a uma matriz vazia. Em breve, isso será mantido em sincronia com o Firebase. Assim, todos os dados que temos dentro do nosso banco de dados serão então refletidos dentro do estado. O que significa que ainda podemos usar nossos itens de menu get getter para pegar nosso estado e empurrá-lo para nossos componentes. Então agora vamos instalar o pacote que precisamos, que é chamado Vuexfire. Eu vou fazer isso via npm, com o comando i no nome do pacote é Vuexfire, e isso deve levar alguns momentos para instalar. Ótimo, com isso agora, podemos verificar se isso está instalado dentro do package.json, podemos ir up-to dependências e receber Vuexfire está instalado aqui, e o próximo passo é adicionar nossas mutações Firebase. Ele é adicionado ao armazenamento raiz e estes em mutações, precisamos mutar nosso estado cada vez que os dados dentro do Firebase muda. Então vamos passar para o store.js raiz dentro da nossa pasta stall. Eu provavelmente vou falar, primeiro precisamos importar estes do Vuexfire. Isto vai ser chamado de importação. Então, dentro das chaves, mutações Vuexfire, no pacote está Vuexfire. Isso nos permitirá injetar essas mutações na raiz de nossa loja. Então podemos adicionar as mutações com o nome correspondente de cima. Agora eu tenho isso, o próximo passo é melhorar nossas ações. Isso leva nossas ações normais que temos em nossa loja e, em seguida, adicionar alguns parâmetros adicionais para vincular ou desvincular nosso estado a uma referência do Firebase. Então, no nosso caso, combinamos nosso menu Firebase e coleção mais antiga, e veremos como fazer isso agora. Vamos configurar isso de volta no módulo do menu, primeiro, precisamos importar a ação do Firebase, assim como fizemos com as mutações do Firebase no topo. Ok, isso é chamado de exportação, então nós adicionamos isso dentro das chaves, o nome é ação Firebase. Mais uma vez, a partir do nosso pacote Vuexfire, nós também vamos estar lidando com nossa referência de menu, então nós também podemos importar isso de nosso próprio arquivo Firebase. Ele será chamado de ref menu DB. O caminho do arquivo é dot, dot slash, dot, dot slash e o nome do arquivo do Firebase. Então agora dentro deste módulo de menu, nós já temos nossa configuração de objetos de ações. Aqui dentro vamos usar a ação de fogo que acabamos de importar, em vez de usar uma ação regular. Isso envolverá nossa ação para que possamos usar o Vuexfire para manter nossos dados em sincronia com o Firebase, e eu vou chamar esse novo menu de conjunto de ações ref. Podemos então acessar a ação de cinco estrelas, que acabamos de importar, instalar a ação também leva em nossos objetos de contexto assim como uma ação regular faz, mas como mencionamos antes, ele também aumenta com algumas novas funções para ajudar a vinculá-lo ao Firebase. Vamos configurar isso como uma função. A primeira coisa a fazer dentro do nosso corpo de função é retornar o contexto e, em seguida, acessar uma das funções extras fornecidas chamado bind fire store ref. Mas o que exatamente queremos vincular ao Firebase? Se rolarmos para cima, já temos dentro deste arquivo levar duas coisas que queremos vincular. Temos uma referência ao nosso banco de dados que aponta para a nossa coleção de menus dentro de nossos estados. Logo abaixo, temos nossos itens de menu locais. Então estas são as duas referências que você quer manter em sincronia. Combinamos esses dados e garantimos que os dados sejam exatamente os mesmos. Então, primeiro de tudo, vamos passar em nosso estado de itens de menu. E, em seguida, o segundo argumento vai ser o nosso menu de banco de dados ref. Se agora passarmos para o nosso aplicativo, que foi determinado com isso, isso foi adicionado automaticamente pelo editor de texto. Então isso só precisa ser uma ação viável, volta ao aplicativo, você vê que agora perdemos nossos itens de menu. Isso é porque estamos perdendo uma coisa importante. Criamos nossa ação no módulo, mas não a despachamos. Esta ação em particular não altera nosso estado, em vez disso, ela se liga ao Firebase. Portanto, queremos despachá-lo assim que o aplicativo for carregado. Um bom lugar para fazer isso seria dentro do gancho criado no arquivo app.view principal. Vamos para o app.view e para baixo para o nosso script. Podemos adicionar o gancho criado logo após nossos componentes. Nós despachamos isso assim como com qualquer ação, podemos acessar este despacho de ponto estrela. A primeira coisa é passar ação fácil que é chamado set menu ref. O segundo argumento é o payload, que é DB menu ref, que aponta para a coleção de menu em nosso banco de dados. Agora que incluímos o menu DB ref, também precisamos importar isso na parte superior de nossos scripts do nosso arquivo Firebase, que está localizado em ponto barra, e depois Firebase. De repente, dentro do gancho criado, vamos despachar a ação uma vez que o aplicativo é criado. Isso garantirá que nossa loja esteja vinculada ao Firebase imediatamente. Agora espero que se salvarmos este arquivo e, em seguida, vamos para o nosso projeto, agora vemos dentro do menu que temos a nossa pizza de pepperoni, que agora é puxada para dentro do nosso banco de dados. Vamos para as rotas de administração. Podemos verificar se isso está sendo exibido corretamente aqui dentro também. Vemos a pizza de pepperoni também aqui. Vamos tentar adicionar mais um. Podemos adicionar isso com um dado padrão. Agora veja a margarita foi empurrada para o nosso banco de dados e também refletida dentro do nosso menu. Portanto, este é realmente um bom progresso e algo que é realmente importante para a nossa aplicação. Em seguida, também vamos fazer o mesmo com nossos pedidos e sincronizá-los com o Firebase. 49. Sincrozinando pedidos com o Firebase: Enquanto estamos no assunto de manter nossos itens de menu sincronizados com o Firebase, também podemos fazer o mesmo com nossos pedidos. Para começar, vou para o arquivo de configuração do Firebase, que é um firebase.js. Já temos uma referência de banco de dados para o nosso menu. Também temos de fazer o mesmo para a nossa encomenda. Vou duplicar isso e alterei a referência DBorders, que vamos apontar para nossa coleta de pedidos. Lembre-se, tudo bem, não temos um objeto chamado ordens ainda dentro do Firebase. A primeira vez que enviarmos uma nova ordem, ela será criada para nós. Então podemos ir para os componentes app.vue. Então, aqui dentro, nós também precisamos importar esta referência. Nós temos a referência do menu, então nós também podemos pegar nossa nova referência de pedidos. Em seguida, rolando para baixo dentro do gancho criativo, podemos duplicar isso e fazer o mesmo para nossos pedidos. Isso vai manter em sincronia nossa referência de pedidos, que irá criar em apenas um momento com nossa referência do Firebase. Esta referência de ordens de conjunto é uma ação que não criamos, então vamos repassar e fazer isso agora. Isso vai ser semelhante ao set menu ref, que criamos no último vídeo. Vamos copiar isto do nosso menu. Menu está dentro dos módulos. Pegue isso das ações e, em seguida, podemos passar para o nosso orders.Js colar isso em como uma ação, e tudo o que precisamos fazer é alterar qualquer referência do nosso menu para ser ordens. O nome, as ordens ref, isto é simplesmente ordens, que é o nome do nosso estado logo acima, que é dito ser um array vazio. Lembre-se, para que isso funcione, também precisamos importar nossa ação do Firebase e nossa referência de pedidos. Podemos ir até o topo do arquivo acima de nossos estados. Vamos importar primeiro nossa ação Firestore do nosso pacote, que é vuexfire. Em segundo lugar, vamos importar nosso DBordersRef, que acabamos de criar em nosso arquivo Firebase. Então... /base de fogo. Assim como com o menu, isso vai adicionar uma ação, que vincula nossas ordens, que é o nome do nosso estado dentro deste módulo com todos os nossos OrdersRef, que aponta para a nossa coleção dentro do Firebase. Com isso agora no lugar, podemos configurar um getter logo abaixo, que vai retirar nossas ordens do Firebase. Vou chamar isso de GetOrders. Isso vai levar em nossos estados dentro de nossa função e, em seguida, retornar ao nosso estado as ordens. Você pode começar a ver um padrão aqui, pois muito do que estamos fazendo é exatamente o mesmo que fizemos para os itens do menu. Nós configuramos uma ligação entre local, estado e Firebase, em seguida, criamos um getter para capturar esses dados, que você pode usar dentro de nossos componentes. Usaremos esse getter no próximo vídeo para exibir nossos pedidos dentro do administrador. 50. Exibindo pedidos na seção de administrador: Agora temos nossos conjuntos de ligações Firebase de nossas ordens, onde criamos nossa antiga referência dentro de nossas ações. Nós também criamos um getter para puxar nossos itens do estado. Vamos agora usar este getter dentro do componente admin para exibir os pedidos e também para alterar nosso carrinho de compras para enviar novos pedidos para Firebase, em vez de diretamente para todos Expo visualizar. Vou começar empurrando essas ordens para o Firebase dentro dos componentes de visualização de pontos do menu. Lá em baixo no fundo. Dentro de todos os métodos temos AddNewOrder, que atualmente está cometendo uma nova mutação chamada AddOrder. Dentro das ordens, esta é a mutação AddOrder e isso está empurrando diretamente para nossa loja. Eu vou agora comentar isso e no lugar, eu vou adicionar uma nova ação na parte inferior, que em vez disso vai empurrar nossos novos pedidos Firebase. Essa ação será chamada de AddNewOrder, e isso será responsável por enviar nossas novas ordens para o Firebase. Vou marcar isto como assíncrono, que possamos usar um peso dentro do nosso código. Podemos passar em qualquer contexto e também a ordem que vai ser a carga passada para esta ação. Podemos configurar nossa função com uma seção try e catch para qualquer manipulação de erros. Tomando o erro, e para quaisquer erros, enviaremos um alerta com a string: “Desculpe, houve um problema ao fazer seu pedido, tente novamente.” A transação vai ser bastante simples, tudo o que precisamos fazer é acessar nosso DBorderReference, e então chamar o método add, que vai empurrar a carga da ordem. Vamos fazer isso e esta é agora a nossa ação completa. Observe dentro desta ação que não cometemos mutação, já que não precisamos atualizar nossa própria loja. Em vez disso, [inaudível] vai lidar com a extração de nossos dados do Firebase, que atualizará demais nosso estado local. Agora podemos chamar essa ação a partir de nossos componentes de menu ao fazer um novo pedido. Primeiro de tudo, eu vou criar uma nova constante que vai conter nossos dados de auditoria como um objeto, nós podemos passar em transtorno AP, que é as pizzas que contidas dentro de nossa ordem, que podemos pegar a partir deste cesta de loja. No entanto, no momento isso nos causaria um problema, nosso carrinho de compras é um tipo de array dentro da propriedade data. No entanto, o Firebase esperará um objeto, então precisamos converter esse cesto para ser um tipo de objetos adicionando as chaves. Em seguida, podemos usar os três pontos, que é o operador de propagação, e isso irá mesclar nos itens de matriz em nossos objetos. Além disso, vou adicionar uma propriedade CreateDAT, que será igual a uma nova data JavaScript. O que nos permitirá retirar nossas ordens em ordem de data, não estamos mais cometendo uma mutação, então vou comentar isso. Vou agora enviar nossa nova ação e ir para acessar esses armazenados diretamente, resolver políticas em apenas um momento, chamar nosso despacho, passando em nome de nossa ação, que é nossa nova ordem. Em seguida, a carga, que é o nosso antigo objeto de cima. Role para cima. Agora podemos importar nossa barraca no topo de nossos scripts. A partir do caminho do arquivo de barra de ponto, Eu vou parar pasta e, em seguida, eu vou parar arquivo. Ao longo do navegador, agora podemos testar isso adicionando um novo pedido, então eu vou apenas pedir alguns pepperonis fazer o seu pedido. Agora, se formos para o console Firebase, nos dá uma recarga, agora vemos nossa coleção mais antiga com nossas pizzas que criamos antes. Vamos tentar mais uma, duas Margherita, isso agora foi adicionado dentro de uma base Firebase. No entanto, se formos até os componentes de administração, então encaminhe/admin, role para baixo até nossos pedidos. Nós só vemos o único valor codificado rígido que adicionamos anteriormente, então agora podemos remover esses valores codificados e fazer isso dinâmico. Lembre-se no arquivo ordem [inaudível], nós criamos um getter ordens get, que você pode puxar em nossos pedidos. Agora, vamos para admin dot view e atualizar nossos componentes. Dentro da seção computada, já temos nosso getter que mapeamos atualmente. Podemos adicionar mais um, que é receber ordens. Então, no modelo, podemos percorrer e exibir as ordens. Vamos procurar a seção de pedidos. Dentro do corpo da mesa, podemos adicionar um V para loop. Vamos armazenar cada item dentro da variável automática, vamos também gravar o índice em getOrders, também precisamos adicionar uma chave dinâmica. Para combinar isso, pegue o valor da chave do ID do ponto do pedido. A primeira coisa que podemos fazer é numerar as ordens individuais, em vez do valor codificado antes. Dentro das chaves duplas, podemos acessar nosso número de índice, e eu vou adicionar um valor de um. Isso ocorre porque os índices começam na posição zero, queremos que a primeira ordem seja usada, e então um. Agora, temos nossa ordem individual, vamos agora criar um segundo V para loop na linha seguinte. Este loop vai ser para todas as pizzas dentro da ordem, podemos armazená-los dentro de uma variável chamada OrderItem. Vamos percorrer nossa ordem e pegar todas as peças individuais. Podemos então adicionar uma chave dinâmica para a nossa lista, e a chave pode ser OrderItem e cortar o ID. Podemos então usar o OrderItem para substituir nossos valores codificados para nossa pizza. Dentro das chaves duplas, podemos acessar o nome do ponto OrderItem, podemos acessar o preço, quantidade e também o preço para baixo na parte inferior. Eu também vou remover o símbolo de moeda, já que também vamos adicionar alguma formatação a todos os preços mais tarde, e isso será automaticamente adicionado em quatro linhas. Salve isso, e agora podemos ir para os componentes de administração, role para baixo e como nossos dois pedidos que agora serão puxados do Firebase. Se você puder ver esses pedidos em sua tela, você obteve com sucesso pedidos da loja central, que é mantida em sincronia com o Firebase. No momento temos dois proprietários, mas teremos muito mais. Não há garantia de que quando salvarmos em ordem ou recuperá-lo do Firebase, ele vai voltar em qualquer ordem específica. Lembre-se de antes quando criamos nossos objetos de pedidos para baixo em AddNewOrder, também adicionamos um criado nossa propriedade, que agora podemos usar para puxar em nossos pedidos do Firebase em ordem de data limpa. Podemos fazer isso sobre qualquer ordem ponto JS dentro de nossa ação onde definimos a referência cinco loja. Nós acessamos nosso DBorderReference e ver onde também podemos adicionar o OrderByMethod, que é fornecido pelo Firebase, passando em uma string. A string vai ser o nome dos campos que queremos sempre comprar, isto é criado aquilo. Se agora salvarmos isso e passarmos para o navegador, ainda vemos nossas duas ordens de Pepperoni e, em seguida, nossa Margherita, que estão em ordem crescente. Se queremos inverter em ordem decrescente, também podemos passar em um segundo argumentos separados por uma vírgula do ESC, que é abreviação para descer para o administrador e agradável e agora invertido. No entanto, vou manter isto como ordem ascendente, já que é mais prático para a nossa aplicação. Mas este é um recurso útil se você quiser reverter a ordem de qualquer coisa vindo do Firebase. 51. Movendo “adicionar nova pizza” à loja central: Dentro deste NewPizza.View componentes, usamos isso dentro do administrador para adicionar novos itens ao menu. No momento, tudo funciona completamente bem e, como esperado, empurramos diretamente um novo objeto de pizza para o Firebase, usamos DBMenureF e, em seguida, no módulo menu.js, temos uma configuração de ação, que é uma vinculação puxar quaisquer novas pizzas e, em seguida, salvá-los para a nossa loja. O que vamos fazer agora é apenas um refator. Vamos mover a funcionalidade de adicionar uma nova pizza em nossa loja. Dentro deste menu.js, eu vou configurar isso como uma nova ação logo sob SetMenureF. Isso manterá todas as nossas funcionalidades relacionadas juntas e mais organizadas. Primeiro podemos criar esta ação que eu vou chamar addMenuItem. Isso vai ser assíncrono como no contexto. Então, como um segundo argumento, vamos passar na pizza como a carga útil, que passará quando despacharmos essa ação de nossos componentes. Podemos configurar o resto da função, podemos adicionar manipulação de erros, para que possamos adicionar try and catch passando em quaisquer erros. Então, a partir de agora, vou adicionar um alerta dentro dos ticks de trás, que possamos inserir uma variável de erro, criar uma nova pizza, passando nosso erro como uma variável. Dentro da seção try, isso novamente vai ser bastante simples assim como com as ordens que chamamos de nosso dbMenuReference. Apenas adicionar método, passando na pizza como a carga útil. Esperança no topo, já importamos nossa referência de menu, então isso é bom. Agora podemos ir para os novos componentes de pizza, onde podemos agora despachar essa ação. Primeiro precisamos impor a nossa loja dentro do script VO. O caminho final para a nossa loja é ponto barra na pasta da loja e, em seguida, o nosso arquivo da loja, volta para o nosso método add. Vou comentar isto, aceder à nossa loja e depois despachar a nossa acção. O primeiro argumento é o nome da ação de addMenuItem. Em seguida, o segundo é a carga útil da pizza, que podemos acessar com isso.NewPizza. Tudo o que eu preciso fazer agora é dar isso um Save e ir para o administrador dentro do navegador. Nós não usar mais dbMenuReference para que possamos rolar para cima e também remover isso também. Voltar para o navegador e para o administrador. Atualmente no banco de dados, só temos pepperoni e margarita. Vamos tentar mais uma. Isso não é vegetariano. Vou considerar usar a descrição e o resto das opções. Clique em “Adicionar”. Lá vamos nós, temos uma nova pizza vegetariana dentro do nosso menu. Nós também podemos verificar dentro dos componentes do menu e isso também está sendo adicionado também. Este é apenas um pequeno refator, mas mantém todas as funcionalidades juntas e mais organizadas. 52. Removendo itens do banco de dados: Nós nos concentramos até agora em adicionar novas fotos e novos pedidos, mas agora vamos mudar nossa atenção para remover coisas do banco de dados. Se você passar para o Visual Studio Code e ir para os componentes de visualização de ponto admin, dentro do modelo, já temos alguns botões HTML configurados. Nós queríamos remover todos os itens de menu e abaixo dentro do loop de pedidos. Também temos um botão para remover quaisquer pedidos. Eu vou começar na primeira pessoa, que é remover todos os itens de menu, adicionando um manipulador Click para o nosso botão excluir. Logo após a classe, podemos adicionar um clique e, em seguida, configurar isso para ser Remover item de menu, que queremos configurar como um método logo abaixo. Isso precisa ter o ID do ponto do item, então sabemos qual deles remover do banco de dados. Este manipulador de cliques vai enviar uma ação da nossa loja, que vamos criar muito em breve. Nós já temos nossa loja importada, então agora podemos rolar para baixo e adicionar isso como um método. Logo após sair, podemos adicionar Remover item de menu, que leva os argumentos do ID que você passa para ele. Precisamos despachar esta ação que vamos chamar Remover item de menu acessando nosso despacho ponto da loja. O nome da ação, que queremos chamar Remover item de menu e também o ID como a carga útil. Mais no menu ponto js que é o módulo de loja, podemos criar esta ação. Logo após adicionar item de menu, adicione uma vírgula. Podemos configurar isso que foi Remover item de menu. Isso vai ser assíncrono. Podemos analisar em qualquer contexto e também a carga útil que foi o ID, define sobre a função e também o nosso tratamento de erros. Tente pegar, passando os erros, e podemos alertar quaisquer erros para o usuário dentro dos backticks. Erro ao remover item de menu e, em seguida, passar a variável que é o nosso erro. Dentro de nossa seção de treinamento, aqui dentro queremos esperar nossos documentos que podemos pegar do nosso menu DB ref, e os documentos que queremos pegar é o ID que é passado como a carga útil. Podemos armazenar isso dentro de uma constante que eu vou chamar item. Para este item, podemos chamar o método de exclusão Firebase, que vai remover isso do banco de dados. Vamos experimentar isso na seção de administração, role para baixo até nossos botões dentro do menu. Podemos clicar em um desses. Isto está agora a ser removido da nossa base de dados. Vamos apenas verificar novamente. Se formos ao menu, queremos ver a margarita e o pepperoni. Ele agora é removido do nosso banco de dados. Nossas descobertas do Firebase também estão mantendo isso em sincronia com nosso estado local, significa que nosso administrador e também menu é exatamente o mesmo que nosso banco de dados. Agora podemos fazer o mesmo para remover nossos pedidos na tela de administração dois. Volte para a visualização de pontos do administrador. Se formos para o nosso loop de pedidos, dentro do nosso botão também podemos adicionar um manipulador de cliques dentro aqui. Este manipulador de cliques vai ser Remover ordem. Isso também precisa pegar o ID, que podemos pegar do ID do ponto do pedido. Role para baixo. Nós também podemos criar um método para isso, coisas que removem item de menu. Esta é a ordem de remoção, levando o ID. Podemos então enviar uma ação que vamos criar em apenas um momento, que será chamado de ordem de remoção. Passando o ID como a carga útil, desta vez vamos criar esta ação dentro de nossas ordens dot js módulo. Vamos para lá dentro da loja, dentro de nosso objeto de ações que está localizado no final de uma nova ordem. Podemos definir para Remover ordem, praticamente como fizemos antes. Isso vai ser assíncrono. Passando em qualquer contexto, o ID como a carga útil. Eu tentaria e nossa seção de corte para manipulação de erros passando o erro e alertando o usuário. Mais uma vez dentro dos backticks, o texto desculpe, houve um problema, removendo a ordem, passando em erro como nossa variável. Assim como o item de menu, também vamos aproveitar o método de exclusão do Firebase. Primeiro vamos encontrar nossos documentos aguardando o DB ou este ref acessando os documentos individuais com a carga do ID. Podemos armazenar isso dentro de uma ordem chamada constante e, em seguida, chamar ordem ponto delete. Agora podemos testar isso no administrador. Vamos primeiro verificar quantos pedidos temos. Aqui dentro temos duas ordens separadas, então agora podemos excluir uma dessas. Eu excluo o segundo no console e atualizo. Como removemos nossos dois pedidos, não temos mais a coleta de pedidos. Tudo isso está funcionando bem, que significa que todos os nossos botões de remoção estão agora completos. Vou deixar este vídeo lá, e em seguida podemos tornar o administrador mais seguro escondendo-o de usuários não autorizados. 53. Ocultando o administrador de usuários não autorizados: Vamos agora fazer algum trabalho nos componentes de administração. Faça com que essa seção de administração pareça e se comporte exatamente como queremos. No momento, mesmo quando um usuário não está logado, ainda temos acesso às informações confidenciais, como os itens do menu, os pedidos, ainda podemos remover itens, e podemos adicionar pizzas extras mesmo quando não logado. O que queremos fazer é adicionar alguma renderização condicional usando v-if. Quando um usuário não está conectado, nós simplesmente queremos mostrar os componentes de login. Quando eles estiverem conectados, queremos alterá-lo e ocultar esses componentes, deixando o restante da seção de administração. Se formos em frente e entrar, podemos ver por nosso e-mail na parte superior, que é nossos componentes de visualização de administrador tem acesso aos nossos estados logados. Ele tem acesso a isso por causa de um getter dentro do Admin.Vue chamado “CurrentUser”. Vou fazer uso disso agora para esconder e mostrar o conteúdo. Vamos olhar para os nossos modelos de administração e anotar na parte inferior. Teremos um componente de login aqui, então tudo acima disso dentro do nosso template é informação sensível, que só queremos exibir quando logado. Para fazer isso, vou embrulhar tudo o resto em uma nova seção. Tudo acima do login. Vamos rolar para cima até o topo, logo abaixo do wrapper admin, podemos criar uma nova seção e, em seguida, adicionar alguma renderização condicional usando v-if. Podemos verificar se o usuário atual não é igual a null. Role para baixo, agora podemos fechar o resto da seção, logo acima do nosso login. Agora, tudo além da seção de login só será mostrado se o usuário estiver conectado com o próprio componente de login. Podemos fazer o oposto dentro de nossas declarações V-if. Podemos verificar se o usuário atual é igual a nulo. Se isso for verdade, isso significa que o usuário atual não está conectado e, em seguida, renderizaremos os componentes de login, salvaremos isso e, em seguida, diremos para o navegador. Não conseguimos logar. O que significa que vemos toda a seção de administração. Se rolarmos para baixo até a parte inferior, nosso componente de login agora está oculto. Vamos tentar sair. Agora, isso remove todas as informações confidenciais do administrador, deixando um formulário de login. Vamos verificar se isso também está funcionando depois de fazer login. Mais uma vez, vemos a seção admin, e se formos para a parte inferior, o componente de login agora é removido. Agora temos a tela de administração exibida corretamente, dependendo se o usuário está logado ou desconectado. 54. Calculando o total do carrinho: Mas momentos dentro de nossa seção de menu, podemos adicionar com sucesso itens para cestas de compras. Também podemos aumentar e diminuir a quantidade para cada item de linha. Como você pode ver aqui, o número ainda não está formatado para um valor de moeda, mas faremos isso no próximo vídeo com um filtro. Na parte inferior, temos o texto do total do pedido, mas ainda não temos nenhuma exibição do preço total. Mas isso é o que vamos fazer neste vídeo configurando uma propriedade computada, que vai recalcular nosso total. Vamos para os nossos componentes de visualização de pontos de menu e agora role para baixo até o nosso script. Dentro daqui, parece que nossa cesta é atualmente uma matriz, podemos usar o método mapa para deixar através de todos os itens na cesta, é provavelmente preço e quantidade que vai recalcular nosso total. Agora, podemos fazer isso dentro da seção computada, logo após onde mapeamos nossos getters, e uma vírgula, e eu vou chamar isso de total. Como começar inicializando uma variável chamada o custo total, que podemos obter muito em breve e assim estes dois adicionar valor inicial de zero. Então, para obter isso, vamos percorrer nossa cesta, para que possamos acessar esta cesta feita, então vamos usar o método de mapa JavaScript, passando na variável item, que é cada item dentro do nosso cestas. Aqui dentro, a maneira como vamos pegar o valor, vai ser acessando o item individual. Precisamos multiplicar a quantidade para cada item pelo preço ponto do item. Isso nos dará a quantidade total para cada item de linha, então o primeiro no loop, no momento serão as duas margheritas. Então teremos as três margheritas no próximo ciclo. Eu posso armazenar isso em nossa variável de custo total, e depois adicionar ao valor com mais igual. Depois disso, vamos então retornar o valor do custo total. Isso está disponível quando chamamos nossa propriedade computada. Agora podemos colocar o valor do total, após o nosso total de pedidos aqui dentro das chaves duplas. Dê-nos um salvamento e vá para o navegador. Dentro do nosso menu, agora podemos adicionar algumas pizzas. Agora vemos com uma de cada quantidade, o total do pedido está sendo atualizado. Vamos tentar aumentar o valor. Novamente, e também deduzindo um item e isso é atualizado com cada item adicional. Agora, nosso custo total de cesta está sendo exibido. No próximo vídeo, vou ver como podemos adicionar um filtro global ao preço para que ele seja exibido em um formato de moeda. 55. Filtro de moeda global: No último vídeo, criamos um custo total para a parte inferior da nossa cesta e, em seguida, produzimos isso usando uma propriedade de computador. Se adicionarmos às quantidades de cesta, você notará que de vez em quando obtemos um monte de casas decimais, então precisamos adicionar algum formato a esta moeda. Cada item de linha tem um símbolo de moeda codificado, mas não temos um para o total do pedido. Para corrigir isso, eu vou usar um pacote NPM chamado accounting-js, que vai adicionar alguma análise de moeda e formatação para nossos números. Ele também funciona bem como um filtro vue.js. Instalar isso é simples, podemos usar o comando npm i dentro do terminal. Vamos abrir isso, em seguida, usar npm i e o nome do pacote é accounting-js. Enquanto isso está sendo executado, eu vou voltar para o nosso servidor e, em seguida, para o arquivo main.js onde podemos importar isso no topo. Queremos importar isso como contabilidade e o nome do pacote é accounting-js. Podemos então configurar isso como um filtro vue acessando a instância vue e, em seguida, um nome de método que é chamado filtro. Isso configurará um filtro global para que ele esteja disponível para uso em todos os nossos componentes. Nosso filtro leva em dois argumentos. O primeiro argumento é o nome que vamos dar ao nosso filtro. Vou chamar essa moeda. Então o segundo vai ser uma função. Uma função vai levar no valor que passamos para ele. Este vai ser o preço que precisamos formatar, modo que o preço de cada pizza individual no total da ordem. Em seguida, queremos retornar um novo valor do nosso pacote de contagem. Vamos então acessar um método que é chamado formato de dinheiro e dinheiro formato leva em nosso valor para processar. Nós também podemos trazer isso para sua própria linha removendo as instruções de retorno e também as chaves, apenas tornar nosso código um pouco mais curto, e também certifique-se que isso está escrito corretamente também, então mude isso. Nós mencionamos antes que isso cria um filtro global, para que possamos usá-lo instantaneamente em qualquer um de nossos componentes. Precisamos usar isso no menu de componentes do vue. Podemos começar dentro do nosso total de pedidos. Para usar nosso filtro, tudo o que precisamos fazer dentro das chaves duplas, é usar o símbolo pipe e, em seguida, passar em nosso nome de filtro, que era moeda. Isso não tem um símbolo de dólar codificado, mas isso é adicionado no nosso pacote de moedas. Logo acima, temos o preço individual para cada linha. Podemos remover o símbolo de dólar codificado e, em seguida, também adicionar em nosso filtro de moeda. Também temos mais um se salvarmos isso e voltarmos ao nosso menu. Nós também temos os preços para cada pizza individual. Vamos rolar para cima em nossa seção de menu. A option.price, adicione o pipe e nosso filtro de moeda, remova qualquer símbolo de dólar codificado, dê este arquivo um Salvar e sobre o navegador. Dentro do nosso menu ainda vemos o símbolo da moeda, mesmo que tenhamos removido o valor codificado. Vamos adicionar alguns itens à nossa cesta. Nós vemos os símbolos do dólar dentro daqui também, e vamos tentar aumentar o valor. A moeda agora parece estar sendo exibida corretamente. O último lugar onde precisamos adicionar esse filtro é nos componentes de administração, onde exibimos nossos pedidos. Vamos fazer isso agora. Dentro dos componentes de administração, precisamos procurar nosso loop, nossos itens de pedido e, em seguida, quando produzimos o preço, podemos adicionar nosso filtro, exatamente como fizemos antes. para o navegador e podemos testar isso. Vamos começar fazendo um novo pedido. Send está desligado e dirija-se ao nosso administrador, onde também podemos precisar fazer login. Adicione os detalhes do usuário. Role para baixo até nossos pedidos, e agora temos alguma formatação para nosso preço. Também temos um erro em relação ao nosso tamanho, então só precisamos mudar isso para ser item do pedido. Tamanho, e lá vamos nós. Este é agora o nosso filtro todos trabalhando com o formato de moeda em. Símbolo de dólar é o padrão quando se usa conta-js. Isso pode ser facilmente alterado, no entanto, se você preferir, e, em seguida, adicione algumas etapas simples para seguir se você passar para a documentação. Por agora, porém, eu vou vê-lo no próximo vídeo onde vamos adicionar alguns toques finais ao nosso projeto. 56. Toques finais: Fizemos muito trabalho para chegar a esta fase do projeto, tão bem feito para chegar até aqui. Eu só queria adicionar alguns toques finais neste vídeo, começando dentro dos componentes de login. No momento, se sairmos, pode ser óbvio para alguns que esta é uma seção de login, mas também podemos adicionar algum texto para dizer ao usuário que ele precisa fazer login. Em qualquer componente de visualização de login, vamos para o topo dos modelos. Vamos encontrar o nosso formulário e também o nosso wrapper de login. Aqui dentro, eu vou adicionar um “p” elementos com algum texto. Faça login para continuar. Salve isso e volte para o navegador. Vamos agora ver o nosso texto aqui, instruir o novo usuário a fazer login. A próxima coisa que vou fazer é adicionar um guarda de navegação a este administrador. Se o usuário estiver logado, lembre-se, podemos ver informações confidenciais e qualquer pessoa que tenha acesso pode ver os pedidos e também remover quaisquer pedidos ou pizzas. Para proteger este administrador se o usuário fosse navegar para fora sem logout, podemos adicionar um protetor de navegação, que vai alertar o usuário e também sair automaticamente. Vamos fazer isso nos componentes admin.view. Podemos adicionar nossa proteção de navegação dentro de nossos scripts. Logo após os nossos métodos, vou adicionar o guarda a todos antes do Routeleave. Como olhamos anteriormente, isso leva em dois de e também em seguida. A primeira coisa que queremos fazer é adicionar uma declaração if onde podemos adicionar uma caixa de confirmação. Isso alertará o usuário de que ele será desconectado se ele continuar a navegar para fora da área de administração, que possamos ter uma string de “Você será desconectado ao sair do administrador”. Esta é uma pergunta. Se isso for verdade, se eles continuarem a navegar, o que eu vou acessar nossa loja, então podemos chamar de despacho e o nome da ação que queremos despachar é sair. Isso fará logout automaticamente do usuário ao sair do administrador. Se eles foram para cancelar esta conformação, nós podemos adicionar isso em um outro declarações. Tudo o que queremos fazer aqui dentro é ficar nas mesmas rotas. Poderíamos fazer isso passando falso para o próximo. Digamos que isso sob o administrador, precisamos fazer login. Agora, estamos dentro dos componentes de administração. Vamos tentar ir para o menu. Recebemos um alerta. Se cancelarmos isto, ficaremos na mesma página. De volta ao menu. Clique em “Ok”. Você vê que nós desconectado, mas ainda estamos na página de administração. Para continuar para os componentes do menu ou qualquer over de, então você também precisa chamado próximo dentro aqui. Podemos tentar mais uma vez. Agora estamos logados. Vamos tentar a cerca. Podemos cancelar e ainda estamos dentro do administrador. Vamos tentar mais uma vez em ok e agora tomamos em nossas rotas sobre. A última coisa é um CSS menor, que eu vou adicionar à vista principal para baixo na seção Estilo. O primeiro que vou fazer é direcionar nossas entradas e nossa área de texto para nossa nova entrada Pizzas, então entrada, textarea. Tudo o que vou fazer aqui é aumentar o tamanho da fonte para 1,1 rems. Em seguida, queremos adicionar algum estilo geral nos botões para que não possamos remover a borda definindo como null e também aumentar o tamanho da fonte para ser 1.1 rems também. Dentro do nosso aplicativo, também temos algumas classes de btn_green e também btn_red. Isso também está faltando atualmente nossos estilos. Vamos começar com verde. Tudo o que você precisa fazer é definir a cor de fundo e definir é para ser um valor rgb de 101.168 e, em seguida, 101. Em seguida, o btn_red. A cor de fundo, isso também será um valor rgb de 241, 70, e também 70 nos dando a cor vermelha. Para o navegador, temos cores verdes aqui dentro e também aqui. Vamos tentar a seção de administração, onde também temos nossos botões vermelhos. Temos os sinais vermelhos. Além disso, onde removemos os pedidos de pizzas, temos nossos botões vermelhos também. Se quiséssemos, poderíamos ir ainda mais longe com o estilo em, mas eu vou liderar este projeto aqui uma vez que esta é uma visão JS Course. Em seguida, vamos passar para uma nova seção que você pode cobrir um novo tópico, que será carregamento lento e como dividir nosso aplicativo em pacotes menores. 57. O que é a divisão de código e o carregamento preguiçoso?: Antes de mergulharmos em divisão de código e carregamento preguiçoso, primeiro, vamos dar uma olhada rápida por que podemos precisar dele. A primeira coisa a notar é que o Vue CLI usa web park nos bastidores. Ele abstrai toda a configuração para que possamos nos concentrar em desenvolvimentos ou nas versões do Vue CLI, você tem um arquivo de configuração do pacote web disponível para aqueles em nosso diretório de projeto que podemos inspecionar e modificar. Esta nova versão que estamos usando neste curso não a tem disponível, mas ainda podemos ver o conteúdo deste arquivo usando o comando de saída da CLI do Vue. Podemos fazer isso se formos até o terminal e vamos abrir uma nova aba para manter o servidor funcionando e o comando que podemos usar é view inspecionar. A flecha maior que. O arquivo que queremos selecionar é a saída JS. Ele entra e isso irá gerar um arquivo JS saída segue dentro do nosso projeto. Uma vez que está sendo gerado, podemos entrar em nossa barra lateral e em nosso projeto. Aqui está o nosso arquivo output.js, que acabamos de gerar. Agora, se nós rolar para cima e para baixo através do arquivo, há muita coisa acontecendo aqui, mas nós podemos usar o recurso de pesquisa de editores de texto com comando ou controle F. Eu não quero procurar por entrada. entrada nos levará para perto da parte inferior do arquivo e apontará para o ponto de entrada principal do nosso aplicativo que está localizado no arquivo main.js. Este arquivo é o nível superior da nossa aplicação e contém tudo para todos os projetos. Web embalá-los pacotes juntos tudo dentro desses projetos incluem todos os arquivos, todos os nossos ativos e, em seguida, eu vou colocar alguns em um único arquivo. Que é chamado de build.js. Nós também podemos ver este local de saída pela união de pesquisa para saídas e isso irá apontar para um caminho de arquivo, que é o nosso diretório de projeto. Em seguida, ele irá gerar uma pasta de disco segue. Agora sabemos sobre essa entrada e saída. Vou remover nosso arquivo output.js, uma vez que não é necessário dentro do nosso aplicativo. Este único arquivo bundled.js, que é armazenado em nossa pasta de disco, que vamos criar em breve, é baixado do servidor na primeira vez que um usuário visita nosso site ou aplicativo. Isso é completamente bom se eles construírem relativamente pequeno. Mas em alguns aplicativos que incluem muitos códigos e ativos, este arquivo pode se tornar realmente grande e levar um longo tempo para baixar do servidor, particularmente em dispositivos móveis. Isso pode levar a uma experiência de usuário ruim. Isso nos leva ao assunto da divisão de códigos. Qual é o processo de dividir esses arquivos empacotados ou nosso aplicativo em pacotes menores que só podemos baixar como em quando precisamos deles. Precisamos decidir qual é o conteúdo mínimo ou mais importante que o usuário precisa baixar inicialmente para manter o pacote tão pequeno quanto possível. Podemos então dividir o resto do aplicativo para ser baixado apenas quando necessário, como quaisquer links de menu adicionais que não são comumente usados, e apenas baixar um bom peças extras quando necessário. É o que é chamado de carregamento preguiçoso. Se entrarmos no navegador e passarmos para a página inicial do nosso aplicativo. Quando o usuário visita o nosso aplicativo pela primeira vez, precisamos incluir esta página inicial porque este é os principais pontos de entrada e também os links na parte superior para que o usuário possa navegar. Não precisamos incluir os componentes ou o conteúdo desses links. No entanto, eles podem ser um pacote separado para download somente se um usuário clicar neles. Outro exemplo para salvar no tamanho inicial do download é baixar os componentes da página inicial, mas apenas o conteúdo para a dobra da página. A dobra é a parte inferior da área visível do navegador para que só pudéssemos baixar o conteúdo que podemos ver antes que o usuário rola. Aplicativos como o Twitter, faremos algo muito semelhante carregando apenas tweets. Como você rolar para baixo a página, o que irá acelerar as coisas. Há também muito mais maneira de dividir nosso código também e a carga depende do design de sua aplicação. Por exemplo, podemos querer excluir o conteúdo de um pop-up ou até mesmo o conteúdo de uma seção em uma página que foi renderizada por uma instrução if. Como você pode ver, há muitas maneiras de pensar e vamos abordar algumas dessas nesta seção. 58. Carregando preguiçoso com o roteador Vue: Podemos aplicar divisão de código e carregamento de letras ao usar o roteador de visualização. Isso é relativamente fácil de implementar, pois nossas páginas já estão em seus próprios arquivos separados. Isso significa que podemos separar os componentes desta página e carregá-los somente quando um usuário visita esse link. Por exemplo, na página inicial, podemos apenas querer carregar estes componentes home menu, contato e sobre nós componentes até que um usuário clique neles. Primeiro, vamos passar para as ferramentas de desenvolvedor irá clicar com o botão direito do mouse e inspecionar. Um incidente ligado em rede el