vuex persistedstate
v4.1.0
Persistir y rehidrate su estado VUEX entre las recargas de la página.
¡Ya no se mantiene! Como no uso Vue en mi trabajo diario, es muy difícil mantenerse al día con cualquier cambio con cosas como Vuex, Nuxt.js y otras herramientas utilizadas por la comunidad. Es por eso que decidí dejar de pasar mi tiempo libre a este repositorio. Siéntase libre de comunicarse si desea hacerse cargo de la propiedad del paquete en NPM. Gracias por cualquier contribución que cualquiera de ustedes haya hecho a este proyecto.
npm install --save vuex-persistedstateLa construcción de UMD también está disponible en UNPKG:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > Puede encontrar la biblioteca en window.createPersistedState .
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;Para el uso con para Vuex 3 y Vue 2, consulte la rama 3.xx.
Consulte un ejemplo básico en Codesandbox.
O configurado para usar con JS-Cookie.
O configurado para usar con Secure-LS
Se pueden crear nuevas instancias de complemento en archivos separados, pero deben importarse y agregar al objeto de complementos en el archivo VUEX principal.
/* module.js */
export const dataStore = {
state : {
data : [ ]
}
}
/* store.js */
import { dataStore } from './module'
const dataState = createPersistedState ( {
paths : [ 'data' ]
} )
export new Vuex . Store ( {
modules : {
dataStore
} ,
plugins : [ dataState ]
} )Es posible usar Vuex-PersistedState con nuxt.js. Debe incluirse como un complemento NUXTJS:
// nuxt.config.js
...
/*
* Naming your plugin 'xxx.client.js' will make it execute only on the client-side.
* https://nuxtjs.org/guide/plugins/#name-conventional-plugin
*/
plugins : [ { src : '~/plugins/persistedState.client.js' } ]
. . . // ~/plugins/persistedState.client.js
import createPersistedState from 'vuex-persistedstate'
export default ( { store } ) => {
createPersistedState ( {
key : 'yourkey' ,
paths : [ ... ]
...
} ) ( store )
} Agregue cookie y js-cookie :
npm install --save cookie js-cookie o yarn add cookie js-cookie
// nuxt.config.js
...
plugins : [ { src : '~/plugins/persistedState.js' } ]
. . . // ~/plugins/persistedState.js
import createPersistedState from 'vuex-persistedstate' ;
import * as Cookies from 'js-cookie' ;
import cookie from 'cookie' ;
export default ( { store , req } ) => {
createPersistedState ( {
paths : [ ... ] ,
storage : {
getItem : ( key ) => {
// See https://nuxtjs.org/guide/plugins/#using-process-flags
if ( process . server ) {
const parsedCookies = cookie . parse ( req . headers . cookie ) ;
return parsedCookies [ key ] ;
} else {
return Cookies . get ( key ) ;
}
} ,
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem : ( key , value ) =>
Cookies . set ( key , value , { expires : 365 , secure : false } ) ,
removeItem : key => Cookies . remove ( key )
}
} ) ( store ) ;
} ; createPersistedState([options])Crea una nueva instancia del complemento con las opciones dadas. Se pueden proporcionar las siguientes opciones para configurar el complemento para sus necesidades específicas:
key <String> : la clave para almacenar el estado persistido debajo. El valor predeterminado a vuex .
paths <Array> : una matriz de cualquier ruta para persistir parcialmente al estado. Si no se dan caminos, el estado completo se persiste. Si se da una matriz vacía, no se persiste ningún estado. Las rutas deben especificarse utilizando notación de puntos. Si usa módulos, incluya el nombre del módulo. por ejemplo: "Auth.user" predeterminado es undefined .
reducer <Function> : una función que se llamará para reducir el estado para persistir en función de las rutas dadas. El valor predeterminado incluye los valores.
subscriber <Function> : una función llamada para configurar la suscripción de mutación. Predeterminado store => handler => store.subscribe(handler) .
storage <Object> : en lugar de (o en combinación con) getState y setState . El valor predeterminado a LocalStorage.
getState <Function> : una función que se llamará para rehidratar un estado previamente persistido. El valor predeterminado es usar storage .
setState <Function> : una función que se llamará para persistir el estado dado. El valor predeterminado es usar storage .
filter <Function> : una función que se llamará para filtrar cualquier mutación que active setState en el almacenamiento eventualmente. Predeterminado a () => true .
overwrite <Boolean> : al rehidratarse, si sobrescribe el estado existente con la salida de getState directamente, en lugar de fusionar los dos objetos con deepmerge . El valor predeterminado es false .
arrayMerger <Function> : una función para fusionar matrices al rehidratar el estado. Predeterminado se realiza a function (store, saved) { return saved } (el estado guardado reemplaza el estado suministrado).
rehydrated <Function> : una función que se llamará cuando la rehidratación esté terminada. Útil cuando está utilizando nuxt.js, que la rehidratación del estado persistido ocurre de manera asincrónica. Predeterminado store => {}
fetchBeforeUse <Boolean> : un booleano que indica si el estado debe obtener el almacenamiento antes de que se use el complemento. El valor predeterminado es false .
assertStorage <Function> : una función inocinable para garantizar que esté disponible el almacenamiento, disparado en la inicialización de los complementos. El valor predeterminado está realizando una operación de reducción de escritura en la instancia de almacenamiento dada. Nota, el comportamiento predeterminado podría arrojar un error (como DOMException: QuotaExceededError ).
Si no es ideal tener el estado de la tienda Vuex dentro de LocalStorage. Se puede implementar fácilmente la funcionalidad para usar cookies para eso (o cualquier otro que se le ocurra);
import { Store } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
import * as Cookies from "js-cookie" ;
const store = new Store ( {
// ...
plugins : [
createPersistedState ( {
storage : {
getItem : ( key ) => Cookies . get ( key ) ,
// Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
setItem : ( key , value ) =>
Cookies . set ( key , value , { expires : 3 , secure : true } ) ,
removeItem : ( key ) => Cookies . remove ( key ) ,
} ,
} ) ,
] ,
} ) ;De hecho, cualquier objeto que siga el protocolo de almacenamiento (getItem, setItem, RemoTItem, etc.) podría aprobarse:
createPersistedState ( { storage : window . sessionStorage } ) ;Esto es especialmente útil cuando está utilizando este complemento en combinación con la representación del lado del servidor, donde uno podría pasar una instancia de almacenamiento DOM.
Si necesita usar el almacenamiento local (o desea) pero desea evitar que los atacantes inspeccionen fácilmente los datos almacenados, puede ofuscarlo.
Importante
import { Store } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
import SecureLS from "secure-ls" ;
var ls = new SecureLS ( { isCompression : false } ) ;
// https://github.com/softvar/secure-ls
const store = new Store ( {
// ...
plugins : [
createPersistedState ( {
storage : {
getItem : ( key ) => ls . get ( key ) ,
setItem : ( key , value ) => ls . set ( key , value ) ,
removeItem : ( key ) => ls . remove ( key ) ,
} ,
} ) ,
] ,
} ) ; Como tal vez parezca a primera vista, no es posible pasar una instancia local deFerage como propiedad storage . Esto se debe al hecho de que todos los getters y setters deben ser síncronos y los métodos locales de laFerage son asíncronos.
Consulte ChangeLog para obtener más información sobre lo que ha cambiado recientemente.
Gracias a estas maravillosas personas (Key Emoji):
Robin van der Vleuten ? | Sebastián | Boris Graeff | Cicero pablo | Gurpreet Atwal | Jakub Koralewski | Jankees Van Woezik |
Jofferson Ramirez Tiquez | Jordan Deprez | Juan Villegas | Jürg rast | Kartashov Alexey | Leonard Pauli | Nelson Liu |
Nico | Quentin dreyer | Raphael Saunier | Rodney rehm | Ryan Wang | Sébastien Chopin | jeffjing |
macarthuror | Paul Melero | Guillaume da Silva | Jonathan santerre | Fábio Santos | RobertGr991 | Jurijskolesnikovs |
Bond David | Freek Van Rijt | Ilyes Hermellin | Peter Siska | Dmitry Filippov | Thomas Meitz | Neeron bhatta |
Joaoaraujo-Hotmart |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
La licencia MIT (MIT). Consulte el archivo de licencia para obtener más información.
