La solución a la pérdida de datos de estado de vuex después de actualizar la página web

Recientemente, utilicé vuex para la administración de estado global en el proyecto vue y descubrí que cuando se actualiza la página web, los datos almacenados en el almacén de instancias de vuex se perderán y la visualización de la página también se verá afectada.

razón:

Es un fenómeno normal que los datos de vuex se pierdan al actualizar la página (los datos de vuex no se pierden, sino que se inicializan, vuelven al valor inicial y vuelven al punto original).Porque los datos de JS son almacenado en la memoria de pila del navegador En el interior, actualice la página del navegador y se liberará la memoria solicitada previamente por la pila. Este es el mecanismo operativo del navegador, y los datos en la pila se borrarán naturalmente.

Solución:

método uno

Guarde los datos de estado en almacenamiento local, almacenamiento de sesión o cookie.

// 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
// 在beforeunload方法中将store.state存储到sessionstorage中。

export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

Método dos

Usando vuex-persistedstate, se puede almacenar automáticamente.

descargar:

npm install --save vuex-persistedstate

usar:

在store.js中引入
import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState()]
})

El valor predeterminado es almacenar en localStorage, también podemos almacenar en sessionStorage, como:

import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState({
   storage: window.sessionStorage
  })]
})