1. Descrição do problema:
Vuex geralmente precisam ser colocados em, como dados compartilhados globais no momento de uma informação de usuário de login bem-sucedido, a informação menu. Mas os dados em uma atualização de página quando vuex na re-inicialização, resultando em perda de dados. Porque vuex onde os dados são armazenados na memória em execução, quando a página é atualizada, a página irá recarregar exemplo vue, vuex qual os dados serão realocados.
2. Solução:
Medidas um: dados vuex são salvos diretamente para o cache do navegador (sessionStorage, localStorage, cookie)
Opção dois: pedido quando a página é atualizada dados novamente remotos, de forma que as atualizações dinâmicas vuex Dados
Opção três: uma solicitação para o fundo da página mãe dados remotos e atualizar a página antes que os dados é primeiro salva para vuex sessionStorage (no caso dos dados solicitados é devolvido quando os dados é muito grande pode não obter a página para carga)
Análise: A
maneira uma desvantagem não é seguro, não se aplicam uma grande quantidade de armazenamento de dados;
O segundo método é adequado para pequenas quantidades de dados, ea rede não será adiada;
Opção três é para falar sobre o foco, a abordagem de dois e uma maneira de usar juntos.
3, o processo de resolução:
3.1, selecione o navegador armazena apropriado
localStorage - a nível local, a menos que você tomar a iniciativa de eliminar permanentemente armazenados;
sessionStorage - é armazenado na página atual é fechado, e as outras páginas de guia não relacionados;
o cookie - são armazenados de acordo com o tempo efetivo que você set , mas a desvantagem não é fácil de ler e armazenar grandes volumes de dados, eo fundo irá interagir.
O método de escolha é sessionStorage presente, a razão é devida à aplicação seleccionada vue página única, a operação principal de salto é executada num percurso, uma outra razão é a de assegurar a página de dados sessionStorage sessionStorage é aberta está vazia, e se é que vai localStorage ler a última página de dados aberto.
3,2, a solução
devido ao estado em que os dados são responsivos, de modo armazenamento sessionStorage devem seguir as alterações, e o valor só pode ser alterado pelo estado de mutações.
Em primeiro lugar, após o login do usuário for bem sucedido, em seguida, as informações do usuário, informações do menu distribuído por meio de ações para salvar vuex no. Então cálculo página do menu vuex em um menu de dados do estado, analisa os dados no formato exigido pela extremidade frontal dos componentes de montagem, e depois processar árvore de menus gerado componente. Se a página não for atualizada, está tudo bem.
Depois de um login e os dados do usuário sincronização bem-sucedida ao menu vuex
no menu do monitor vuex página do menu de dados
soluções atualizar a página:
atualização da página quando a informação assíncrona pedido de fundo e, em seguida, dinamicamente vuex dados de atualização, onde há um atraso situação, rede, uma grande quantidade de problemas de dados. Neste ponto, e antes vuex voltar para os dados retornados, a página tem carregamento acabado, e isso vai resultar em perda de dados. Então a solução é, ouvindo atualizar o navegador antes do evento, colocar os dados para salvar sessionStorage vuex antes da atualização do navegador, refrescar depois de um pedido assíncrono bem sucedida se os dados não se for devolvido directamente na aquisição de dados sessionStorage, de outra forma adquirir vuex nos dados. (Apenas não tomar para atualizar os dados de fundo, serão tomadas a partir sessionStorage anos. Garantir a segurança dos dados, mesmo se adquirido em dados sessionStorage é seguro, porque cada atualização será transferido, sem medo de mexer com os dados, e em segundo lugar, sessionStorage é fazer na criptografia de dados)
dados de solicitação da página pai em segundo plano, e monitor de atualizar o navegador antes do evento, os dados serão salvos vuex sessionStorage para
dados de solicitação de página pai em segundo plano, os dados retornados distribuído para vuex
