vuex persistedstate
v4.1.0
Bestehen und rehydrieren Sie Ihren Vuex -Zustand zwischen den Seiten -Reloads.
Nicht mehr gepflegt! Da ich Vue in meiner täglichen Arbeit nicht benutze, wird es sehr schwierig, über Änderungen mit Dingen wie Vuex, Nuxt.js und anderen von der Community verwendeten Tools auf dem Laufenden zu bleiben. Deshalb habe ich beschlossen, meine Freizeit mit diesem Repository zu verbringen. Fühlen Sie sich frei zu erreichen, wenn Sie das Paket auf NPM übernehmen möchten. Vielen Dank für einen Beitrag, den einer von Ihnen zu diesem Projekt geleistet hat.
npm install --save vuex-persistedstateDer UMD -Build ist auch auf UNPKG erhältlich:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > Sie finden die Bibliothek im window.createPersistedState .
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;Für die Verwendung für Vuex 3 und Vue 2 siehe 3.xx Branch.
Schauen Sie sich ein grundlegendes Beispiel auf Codesandbox an.
Oder so konfiguriert, dass sie mit JS-Cookie verwendet werden.
Oder konfiguriert für die Verwendung mit Secure-Ls
Neue Plugin -Instanzen können in separaten Dateien erstellt werden, müssen jedoch in der Hauptvuex -Datei importiert und zum Plugins -Objekt hinzugefügt werden.
/* 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 ist möglich, Vuex-PersistedState mit nuxt.js. Es muss als NuxtJS -Plugin enthalten sein:
// 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 )
} Fügen Sie cookie und js-cookie hinzu:
npm install --save cookie js-cookie oder 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])Erstellt eine neue Instanz des Plugins mit den angegebenen Optionen. Die folgenden Optionen können bereitgestellt werden, um das Plugin für Ihre spezifischen Anforderungen zu konfigurieren:
key <String> : Der Schlüssel zum Speichern des anhaltenden Zustands unter. Standardeinstellung zu vuex .
paths <Array> : Ein Array von Wegen, um den Staat teilweise zu bestehen. Wenn keine Wege gegeben sind, wird der vollständige Zustand bestehen. Wenn ein leeres Array angegeben wird, wird kein Zustand bestehen. Die Pfade müssen unter Verwendung einer Punktnotation angegeben werden. Wenn Sie Module verwenden, geben Sie den Modulnamen an. ZB: "Auth.User" standardmäßig undefined .
reducer <Function> : Eine Funktion, die aufgerufen wird, um den Zustand auf der Grundlage der angegebenen Pfade zu reduzieren. Standardeinstellung, um die Werte einzuschließen.
subscriber <Function> : Eine Funktion, die zum Setup -Mutationsabonnement aufgerufen wird. Standards an store => handler => store.subscribe(handler) .
storage <Object> : anstelle von (oder in Kombination mit) getState und setState . Standardeinstellungen nach LocalStorage.
getState <Function> : Eine Funktion, die aufgerufen wird, um einen zuvor anhaltenden Zustand zu rehydrieren. Standardeinstellungen zur Verwendung von storage .
setState <Function> : Eine Funktion, die aufgerufen wird, um den angegebenen Zustand zu bestehen. Standardeinstellungen zur Verwendung von storage .
filter <Function> : Eine Funktion, die aufgerufen wird, um alle Mutationen zu filtern, die setState letztendlich für den Speicher auslösen. Standardmäßig () => true .
overwrite <Boolean> : Beim Rehydrieren, ob der vorhandene Zustand mit der Ausgabe von getState direkt überschreiben soll, anstatt die beiden Objekte mit deepmerge zu verschmelzen. Standardmäßig false .
arrayMerger <Function> : Eine Funktion zum Zusammenführen von Arrays beim Rehydratisieren. Standards zur function (store, saved) { return saved } (gespeicherter Status ersetzt den angegebenen Zustand).
rehydrated <Function> : Eine Funktion, die aufgerufen wird, wenn die Rehydration beendet ist. Nützlich, wenn Sie Nuxt.js verwenden, was die Rehydratisierung des persistierten Zustands asynchron erfolgt. Standardt zu store => {}
fetchBeforeUse <Boolean> : Ein Boolescher Angabe, ob der Staat vor der Verwendung des Plugins aus dem Speicher abgerufen werden sollte. Standardmäßig false .
assertStorage <Function> : Eine überschriebene Funktion, um sicherzustellen, dass der Speicher verfügbar ist und die Initialisierung von Plugins abgefeuert hat. Standardeinheit führt eine Schreibdelete-Operation in der angegebenen Speicherinstanz durch. Beachten Sie, dass das Standardverhalten einen Fehler aufnehmen kann (wie DOMException: QuotaExceededError ).
Wenn es nicht ideal ist, den Zustand des Vuex -Speichers in LocalStorage zu haben. Man kann die Funktionalität leicht implementieren, um Cookies dafür zu verwenden (oder eine andere andere, die Sie sich vorstellen können).
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 ) ,
} ,
} ) ,
] ,
} ) ;Tatsächlich könnte jedes Objekt, das dem Speicherprotokoll (getItem, setItem, remeItem usw.) folgt, übergeben werden:
createPersistedState ( { storage : window . sessionStorage } ) ;Dies ist besonders nützlich, wenn Sie dieses Plugin in Kombination mit dem Server-Side-Rendering verwenden, wobei eine Instanz von DOM-Storage übergeben werden kann.
Wenn Sie den lokalen Speicher verwenden müssen (oder möchten), aber Angreifer daran hindern möchten, die gespeicherten Daten leicht zu inspizieren, können Sie sie verschleiern.
Wichtig
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 ) ,
} ,
} ) ,
] ,
} ) ; Wie es vielleicht auf den ersten Blick erscheint, ist es nicht möglich, eine lokale Verschiebungsinstanz als storage zu bestehen. Dies ist auf die Tatsache zurückzuführen, dass alle Getter und Setter synchron sein müssen und die Methoden von LocalForage asynchron sind.
Weitere Informationen zu dem, was sich in letzter Zeit geändert hat, finden Sie in ChangeLog.
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Robin van der Vleuten ? | Sebastian | Boris Graeff | Cícero 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 |
David Bond | Freek van Rijt | Ilyes Hermellin | Peter Siska | Dmitry Filippov | Thomas Meitz | Neeron Bhatta |
Joaoaraujo-Hotmart |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
Die MIT -Lizenz (MIT). Weitere Informationen finden Sie unter Lizenzdatei.
