Resolva a atualização da página vue, perda de dados

No processo de realização de projetos vue, às vezes há um problema, ou seja, quando a página é atualizada, os dados da página serão perdidos. A razão para este problema é porque quando vuex é usado para gerenciamento de estado global, os dados na loja são Salvo na memória em execução, a instância vue será recarregada quando a página for atualizada e os dados no armazenamento serão reatribuídos, de modo que os dados são perdidos. A solução é a seguinte:

Solução um:

A primeira coisa que vem à mente deve ser usar localStorage / sessionStorage para armazenar dados externamente para fazer um armazenamento persistente. A seguir está uma solução específica para usar o armazenamento localStorage:

Solução 1: Como os dados no estado são responsivos e os dados são modificados por mutação, o método localStorage.setItem () é chamado para armazenar os dados enquanto modifica os dados no estado por meio de mutação.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store（{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}）

Quando a página for carregada, use localStorage.getItem () para recuperar os dados e colocá-los de volta no vuex. Você pode escrever o seguinte código na função periódica created () de app.vue:

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, 
        this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}

Solução 2: a solução 1 pode resolver o problema sem problemas, mas acionar constantemente o método localStorage.setItem () não é particularmente amigável ao desempenho e parece que não há necessidade de usar vuex para gerenciamento de estado quando os dados são sincronizados com localStorage. Você pode usar localStorage diretamente. Portanto, a solução acima foi aprimorada. O armazenamento localStorage de dados é realizado monitorando o evento beforeunload, e o evento beforeunload é acionado quando a página é atualizada. O método específico é escrever o seguinte código na função de ciclo created () de App.vue:

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
    } 

window.addEventListener("beforeunload",()=>{
        window.localStorage.setItem("list",JSON.stringify(this.$store.state))
    })

Solução dois (recomendada):

Este método é baseado no entendimento de propriedades calculadas e calculadas. Esse parágrafo existe no documento oficial:

Podemos definir a mesma função como um método em vez de uma propriedade do computador. O resultado final dos dois métodos é exatamente o mesmo. No entanto, a diferença é que os atributos calculados são armazenados em cache com base em suas dependências reativas e apenas reavaliados quando as dependências reativas relacionadas mudam. Isso significa que, desde que a mensagem não seja alterada, vários acessos à propriedade de cálculo reversedMessage retornarão imediatamente o resultado do cálculo anterior, sem a necessidade de executar a função novamente.

Disto sabemos que o resultado do atributo calculado será armazenado em cache, ou seja, no caso de cache, o computado dará prioridade ao uso do cache, portanto você também poderá escrever na página correspondente aos dados de estado:

computed:{
   orderList() {
       return this.$store.state.orderList
   }
}

Artigo da Internet, intrusão