¿Cómo resolver el problema de la pérdida de datos al usar vuex para la gestión del estado global en el proyecto?

Referencia: la solución para la pérdida de datos de estado de vuex después de actualizar la página web de la aplicación de una sola página de vue

1. Causa

ans: El almacenamiento de estado de Vuex responde. Cuando un componente de Vue lee el estado de la tienda, si el estado de la tienda cambia, el componente correspondiente se actualizará en consecuencia. Pero hay un problema: los datos almacenados de vuex son equivalentes a las variables globales que definimos, después de la actualización, los datos internos se restaurarán al estado inicial. Los datos de la tienda se almacenan en la memoria en ejecución. Cuando la página se actualiza, la página volverá a cargar la instancia de vue y los datos de la tienda se reasignarán.

2. Soluciones

ans: para guardar el estado de los datos en un almacenamiento local: localStorage sessionStorage cookieen

3. Proceso de resolución

1. Elija el almacenamiento de cliente adecuado

   • localStorage : Almacenado de forma permanente de forma local, a menos que se elimine activamente
   • sessionStorage: Se almacena hasta que se cierra la página actual
   • cookie: El tiempo válido que configuró para almacenar, pero el inconveniente no es que los datos sean fáciles de leer y almacenar una gran
     selección sessionStoragedebido a que:
   • Vue es una aplicación de una sola página y todas las operaciones se realizan en una ruta de salto de página.
   • sessionStorageSe puede garantizar que sessionStoragelos datos estén vacíos cuando se abre la página . Si es así localStorage, se leerán los datos de la última página abierta

2. Cómo sessionStoragealmacenar datos en el estado

   • Solución inviable: dado que statelos datos que sessionStoragecontiene responden, el almacenamiento debe seguir los cambios. Y debido a que vuex estipula que todos los statedatos en los datos deben mutationser modificados por métodos, la primera solución es mutationmodificar statelos sessionStorageatributos almacenados correspondientes mientras se modifican . Pero si desea hacer esto, es mejor usarlo directamente sessionStoragepara la gestión estatal.
   • Solución viable : cuando haga clic en actualizar la página, primero stateguarde los datos sessionStoragey luego actualice la página. Al window.addEventListener("beforeunload",()=>{ })monitorear la actualización de la página, beforeunloadeste evento se activa primero cuando se actualiza la página. En app.vueel detector de eventos beforeunload, puede asegurarse de que se pueda activar cada actualización de página.

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}