Resolver actualización de página vue, pérdida de datos

En el proceso de hacer proyectos vue, a veces hay un problema, es decir, cuando se actualiza la página, los datos de la página se perderán. El motivo de este problema es que al usar vuex para la gestión global del estado, los datos en la tienda Guardada en la memoria en ejecución, la instancia de vue se volverá a cargar cuando se actualice la página y los datos de la tienda se reasignarán, por lo que se perderán los datos. La solución es la siguiente:

Solución uno:

Lo primero que me viene a la mente es usar localStorage / sessionStorage para almacenar datos externamente para hacer un almacenamiento persistente. La siguiente es una solución específica para usar el almacenamiento localStorage:

Solución 1: dado que los datos en el estado responden y los datos se modifican mediante mutación, se llama al método localStorage.setItem () para almacenar los datos mientras se modifican los datos en el estado mediante mutación.

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))
       },
   }
}）

Cuando se cargue la página, use localStorage.getItem () para recuperar los datos y volver a colocarlos en vuex. Puede escribir el siguiente código en la función 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"))))
}

Solución 2: La Solución 1 puede resolver el problema sin problemas, pero activar constantemente el método localStorage.setItem () no es particularmente amigable para el rendimiento, y parece que no hay necesidad de usar vuex para la administración estatal cuando los datos están sincronizados con localStorage. Puede usar localStorage directamente. Por lo tanto, se mejora la solución anterior. El almacenamiento de datos localStorage se realiza mediante la supervisión del evento beforeunload, y el evento beforeunload se activa cuando se actualiza la página. El método específico es escribir el siguiente código en la función 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))
    })

Solución dos (recomendada):

Este método se basa en la comprensión de las propiedades calculadas calculadas. Existe un párrafo de este tipo en el documento oficial de vue:

Podemos definir la misma función como método en lugar de propiedad de computadora. El resultado final de los dos métodos es exactamente el mismo. Sin embargo, la diferencia es que los atributos calculados se almacenan en caché en función de sus dependencias reactivas y solo se vuelven a evaluar cuando cambian las dependencias reactivas relacionadas. Esto significa que mientras el mensaje no haya cambiado, los accesos múltiples a la propiedad de cálculo reversedMessage devolverán inmediatamente el resultado del cálculo anterior sin tener que ejecutar la función nuevamente.

De esto sabemos que el resultado del atributo calculado quedará en caché, es decir, en el caso del caché, el calculado dará prioridad al caché, por lo que también se puede escribir en la página correspondiente a los datos de estado:

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

Artículo de Internet, intrusión