Resolver los datos vuex perdido vuex-persistedstate después de actualizar la página =>

Después se actualice la página, la página que desea guardar los datos no guardados. Siempre utilizamos para poner sessionStorage y localStorage navegador. Pero después de usar un vue, vuex se puede aplicar.

vuex ventaja: En comparación sessionStorage, almacenamiento de datos más seguras, sessionStorage se puede ver en la consola.

desventaja vuex: Después de F5 para actualizar la página, vuex se re-actualización de estado, por lo que los datos almacenados se perderán.

Para superar este problema, vuex-persistedstate apareció ~~

principio:

• El vuex de localStorage presencia estatal o una galleta o una sessionStorage
• Instantánea actualizar la página, los datos vuex desaparecen, sessionStorage volver vuex en el que va a disfrazar conseguido datos sin pérdida de actualización de datos

Modo de empleo:

• instalación:

npm install vuex-persistedstate  --save

• La introducción y dispuesto
  en la tienda bajo index.js

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

Desee almacenar a sessionStorage, la configuración es la siguiente :

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

Del mismo modo galleta o desee utilizar localStorage

vuex-persistedstate todo estado predeterminado persistente, especificar el estado persistente requerida, la configuración es como sigue :

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的user
          user: val.user
        }
     }
  })]

Val en ese momento corresponde almacenar / carpeta módulos contenido de varias js almacenamiento de archivos, que es stor / índice en la importación de nueve módulos, como los datos en los que parte del almacenamiento persistente, el nombre de los datos en esta configuración puede ser, ahora sólo quieren a los datos persistentes almacenados módulo de usuario. Carpeta de contenido es el siguiente:


Nota: Si desea configurar una serie de opciones en este momento, se plugins escritos como una matriz unidimensional, o serán error.

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})