vuex persistedstate
v4.1.0
Persiste e reidrate seu estado de vuex entre as recarregamentos de página.
Não é mais mantido! Como não uso o VUE no meu trabalho diário, fica muito difícil manter -se atualizado com alterações com coisas como Vuex, Nuxt.js e outras ferramentas usadas pela comunidade. Foi por isso que decidi parar de gastar meu tempo livre nesse repositório. Sinta -se à vontade para alcançar se quiser assumir a propriedade do pacote no NPM. Obrigado por qualquer contribuição que qualquer um de vocês tenha feito neste projeto.
npm install --save vuex-persistedstateA compilação UMD também está disponível no Unpkg:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > Você pode encontrar a biblioteca na window.createPersistedState .
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;Para uso com Vuex 3 e Vue 2, consulte 3.xx Branch.
Confira um exemplo básico no Código e caixa.
Ou configurado para usar com JS-Cookie.
Ou configurado para usar com Secure-LS
Novas instâncias do plug -in podem ser criadas em arquivos separados, mas devem ser importados e adicionados ao objeto Plugins no arquivo 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 ]
} )É possível usar o Vuex-PerdSistate com Nuxt.js. Deve ser incluído como um plugin 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 )
} Adicione cookie e 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 ) ;
} ; createPersistedState([options])Cria uma nova instância do plug -in com as opções fornecidas. As seguintes opções podem ser fornecidas para configurar o plug -in para suas necessidades específicas:
key <String> : a chave para armazenar o estado persistido. Padrões para vuex .
paths <Array> : Uma matriz de qualquer caminho para persistir parcialmente o estado. Se nenhum caminho for dado, o estado completo é persistido. Se uma matriz vazia for dada, nenhum estado é persistido. Os caminhos devem ser especificados usando a notação de pontos. Se estiver usando módulos, inclua o nome do módulo. Por exemplo: "auth.user", os padrões undefined .
reducer <Function> : uma função que será chamada para reduzir o estado a persistir com base nos caminhos fornecidos. Padrões para incluir os valores.
subscriber <Function> : uma função chamada para configurar a assinatura da mutação. Padrões para store => handler => store.subscribe(handler) .
storage <Object> : em vez de (ou em combinação com) getState e setState . Padrões para LocalStorage.
getState <Function> : uma função que será chamada para reidratar um estado anterior persistente. Padrões de uso storage .
setState <Function> : uma função que será chamada para persistir o estado especificado. Padrões de uso storage .
filter <Function> : Uma função que será chamada para filtrar quaisquer mutações que desencadearão setState no armazenamento eventualmente. Padrão para () => true .
overwrite <Boolean> : Ao reidratar, seja substituindo o estado existente com a saída do getState diretamente, em vez de mesclar os dois objetos com deepmerge . Padrões para false .
arrayMerger <Function> : uma função para mesclar matrizes ao reidratar o estado. Os padrões de function (store, saved) { return saved } (estado salvo substitui o estado fornecido).
rehydrated <Function> : uma função que será chamada quando a reidratação for concluída. Útil quando você está usando o Nuxt.js, que a reidratação do estado persistente acontece de forma assíncrona. Padrões para store => {}
fetchBeforeUse <Boolean> : Um booleano indicando se o estado deve ser buscado a partir do armazenamento antes que o plug -in seja usado. Padrões para false .
assertStorage <Function> : Uma função substituta para garantir que o armazenamento esteja disponível, disparado na inicialização do Plugins. O padrão um está executando uma operação com delito de gravação na instância de armazenamento fornecida. Observe que o comportamento padrão pode causar um erro (como DOMException: QuotaExceededError ).
Se não for ideal ter o estado da loja Vuex dentro do localStorage. Pode -se implementar facilmente a funcionalidade para usar cookies para isso (ou qualquer outro que você possa imaginar);
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 fato, qualquer objeto seguindo o protocolo de armazenamento (getItem, setItem, removetem etc) pode ser passado:
createPersistedState ( { storage : window . sessionStorage } ) ;Isso é especialmente útil quando você está usando esse plug-in em combinação com a renderização do lado do servidor, onde se pode passar em uma instância de armazenamento dom.
Se você precisar usar o armazenamento local (ou desejar), mas deseja impedir que os atacantes inspecionem facilmente os dados armazenados, você pode ofuscá -los.
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 talvez pareça à primeira vista, não é possível passar em uma instância local deforma como propriedade storage . Isso se deve ao fato de que todos os getters e setters devem ser síncronos e os métodos da LocalForage são assíncronos.
Consulte Changelog para obter mais informações sobre o que mudou recentemente.
Obrigado a essas pessoas maravilhosas (key emoji):
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 |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
A licença do MIT (MIT). Consulte o arquivo de licença para obter mais informações.
