No store, criamos três variáveis “privadas”: _username, _email e _token. Coloquei privadas entre aspas porque elas estão acessíveis publicamente, mas é uma convenção não acessar variáveis que começam com “_”.
Como bônus, ainda incluí o localstorage que é uma forma simples de persistir dados no navegador, através do recurso de chave/valor. Com isso, se o usuário recarregar a página, o estado estará mantido.
Com o store pronto, podemos partir para a implementação. No arquivo src/App.vue, vamos criar dois botões que irão simular a funcionalidade de Login e Logout no sistema.
O método setFakeLogin usa a variável this.store, que foi definida no data da instância Vue do componente e por sua vez o store do data é importado pelo comando import store from './store'
Perceba que os métodos fake apenas preenchem informações mock. Mas nesse ponto poderia-se usar outro serviço para realizar o login no servidor.
Com a App.vue pronta, podemos partir para o componente HelloWorld.vue, no qual nosso interesse maior é observar o estado do store e reagir a ele. Veja:
Assim como fizemos no App.vue, importamos o store usando import store from '../store' (perceba o caminho subindo um nível no diretório) e o usamos na propriedade data da instância Vue para referenciá-lo. Aliás, lembre que