vuex persistedstate

Vuex-PersistédState

Persistez et réhydratez votre état Vuex entre les rechargements de page.

---

Plus maintenu! Comme je n'utilise pas Vue dans mon travail quotidien, il devient très difficile de rester à jour avec des changements avec des choses comme Vuex, Nuxt.js et d'autres outils utilisés par la communauté. C'est pourquoi j'ai décidé d'arrêter de passer mon temps libre à ce référentiel. N'hésitez pas à tendre la main si vous souhaitez reprendre la propriété du package sur NPM. Merci pour toute contribution que vous aviez apportée à ce projet.

---

Installer

npm install --save vuex-persistedstate

La construction UMD est également disponible sur UNPKG:

 < script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script >

Vous pouvez trouver la bibliothèque sur window.createPersistedState .

Usage

 import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;

const store = createStore ( {
  // ...
  plugins : [ createPersistedState ( ) ] ,
} ) ;

Pour une utilisation avec pour Vuex 3 et Vue 2, veuillez consulter la branche 3.xx.

Exemples

Consultez un exemple de base sur la boîte de codes et la boîte.

Ou configuré à utiliser avec JS-Cookie.

Ou configuré à utiliser avec Secure-LS

Exemple avec les modules Vuex

De nouvelles instances de plugin peuvent être créées dans des fichiers séparés, mais doivent être importés et ajoutés dans l'objet Plugins dans le fichier 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 ]
} )

Exemple avec nuxt.js

Il est possible d'utiliser VueX-PersistEdState avec nuxt.js. Il doit être inclus comme un plugin nuxtjs:

Avec stockage local (côté client uniquement)

 // 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 )
} 

Utilisation de cookies (Client universel + côté serveur)

Ajouter cookie et js-cookie :

npm install --save cookie js-cookie ou 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 ) ;
} ; 

API

createPersistedState([options])

Crée une nouvelle instance du plugin avec les options données. Les options suivantes peuvent être fournies pour configurer le plugin pour vos besoins spécifiques:

• key <String> : la clé pour stocker l'état persistant sous. Par défaut à vuex .

• paths <Array> : un tableau de tous les chemins pour persister partiellement l'état. Si aucun chemin n'est donné, l'état complet est persisté. Si un tableau vide est donné, aucun état n'est persisté. Les chemins doivent être spécifiés à l'aide de la notation de points. Si vous utilisez des modules, incluez le nom du module. EG: "Auth.User" par défaut undefined .

• reducer <Function> : une fonction qui sera appelée pour réduire l'état à persister en fonction des chemins donnés. Les défauts incluent les valeurs.

• subscriber <Function> : une fonction appelée pour configurer l'abonnement à la mutation. Par défaut store => handler => store.subscribe(handler) .

• storage <Object> : Au lieu de (ou en combinaison avec) getState et setState . Par défaut à LocalStorage.

• getState <Function> : une fonction qui sera appelée pour réhydrater un état précédemment persistant. Par défaut en utilisant storage .

• setState <Function> : une fonction qui sera appelée pour persister l'état donné. Par défaut en utilisant storage .

• filter <Function> : une fonction qui sera appelée pour filtrer toutes les mutations qui déclenchent éventuellement setState sur le stockage. Par défaut à () => true .

• overwrite <Boolean> : Lors de la réhydratation, s'il faut écraser l'état existant avec la sortie de getState directement, au lieu de fusionner les deux objets avec deepmerge . Par défaut est false .

• arrayMerger <Function> : une fonction de fusion des tableaux lors de la réhydratation de l'état. La fonction par défaut est à function (store, saved) { return saved } (l'état enregistré remplace l'état fourni).

• rehydrated <Function> : Une fonction qui sera appelée lorsque la réhydratation sera terminée. Utile lorsque vous utilisez Nuxt.js, que la réhydratation de l'état persistant se produit de manière asynchrone. Par défaut store => {}

• fetchBeforeUse <Boolean> : Un booléen indiquant si l'état doit être récupéré à partir du stockage avant l'utilisation du plugin. Par défaut est false .

• assertStorage <Function> : Une fonction remplacée pour garantir le stockage est disponible, licencié lors de l'initialisation des plugins. Par défaut, One effectue une opération d'écriture sur l'instance de stockage donnée. Remarque, le comportement par défaut pourrait lancer une erreur (comme DOMException: QuotaExceededError ).

Personnaliser le stockage

S'il n'est pas idéal d'avoir l'état du magasin Vuex à l'intérieur de la localité locale. On peut facilement implémenter les fonctionnalités pour utiliser des cookies pour cela (ou tout autre auquel vous pouvez penser);

 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 ) ,
      } ,
    } ) ,
  ] ,
} ) ;

En fait, tout objet suivant le protocole de stockage (GetItem, SetItem, SupvingItem, etc.) pourrait être passé:

 createPersistedState ( { storage : window . sessionStorage } ) ;

Ceci est particulièrement utile lorsque vous utilisez ce plugin en combinaison avec le rendu côté serveur, où l'on pourrait transmettre une instance de Dom-Storage.

? Obsurpation du stockage local

Si vous avez besoin d'utiliser le stockage local (ou que vous le souhaitez) mais que vous souhaitez empêcher les attaquants d'inspecter facilement les données stockées, vous pouvez l'obscurcir.

Important ️ L'obscurcissement du magasin Vuex signifie empêcher les attaquants d'atteindre facilement les données. Ce n'est pas un moyen sécurisé de stocker des données sensibles (comme les mots de passe, les informations personnelles, etc.), et doit toujours être utilisé en conjonction avec une autre méthode d'authentification pour conserver les données (telles que Firebase ou votre propre serveur).

 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 ) ,
      } ,
    } ) ,
  ] ,
} ) ;

️ Ferme locale ️

Comme cela semble peut-être à première vue, il n'est pas possible de passer une instance locale pour la propriété storage . Cela est dû au fait que tous les Getters et Setters doivent être synchrones et que les méthodes de LocalForage sont asynchrones.

Changelog

Veuillez consulter Changelog pour plus d'informations sur ce qui a changé récemment.

Contributeurs

Merci à ces gens merveilleux (clé emoji):

Robin van der Vleuten ? ️	Sébastien	Boris Graeff	Cícero Pablo	Gurpreet Atwal ️	Jakub Koralewski	Jankees Van Wezik
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
macarthurore	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

Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!

Licence

La licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.