vuex persistedstate
v4.1.0
Сохраняйте и переиграйте свое состояние Vuex между перезагрузками страницы.
Больше не поддерживается! Поскольку я не использую Vue в своей повседневной работе, становится очень трудно оставаться в курсе любых изменений с такими вещами, как Vuex, Nuxt.js и другие инструменты, используемые сообществом. Вот почему я решил прекратить проводить свободное время в этом репозитории. Не стесняйтесь обратиться, если вы хотите взять на себя ответственность за пакет на NPM. Спасибо за любой вклад, который любой из вас сделал в этот проект.
npm install --save vuex-persistedstateСборка UMD также доступна на UNPKG:
< script src =" https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js " > </ script > Вы можете найти библиотеку на window.createPersistedState .
import { createStore } from "vuex" ;
import createPersistedState from "vuex-persistedstate" ;
const store = createStore ( {
// ...
plugins : [ createPersistedState ( ) ] ,
} ) ;Для использования с Vuex 3 и Vue 2, см. 3.xx Branch.
Проверьте базовый пример на CodeSandbox.
Или настроен на использование с JS-Cookie.
Или настроен на использование с безопасным LS
Новые экземпляры плагинов могут быть созданы в отдельных файлах, но должны быть импортированы и добавлены в объект плагинов в основном файле VEUEX.
/* 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 ]
} )Можно использовать vuex-persistedstate с nuxt.js. Он должен быть включен как плагин 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 )
} Добавить cookie и js-cookie :
npm install --save cookie js-cookie или 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])Создает новый экземпляр плагина с данными параметрами. Следующие параметры могут быть предоставлены для настройки плагина для ваших конкретных потребностей:
key <String> : ключ для хранения сохраняемого состояния под. По умолчанию в vuex .
paths <Array> : массив любых путей, чтобы частично сохранить государство. Если пути не дано, полное состояние сохраняется. Если дается пустой массив, государство не сохраняется. Пути должны быть указаны с использованием точечной нотации. При использовании модулей включите имя модуля. Например: «auth.user» по умолчанию undefined .
reducer <Function> : функция, которая будет вызвана для уменьшения состояния, сохранять на основе данных путей. По умолчанию включать значения.
subscriber <Function> : функция, вызванная для установки подписки на мутацию. По умолчанию store => handler => store.subscribe(handler) .
storage <Object> : вместо (или в сочетании) getState и setState . По умолчанию в LocalStorage.
getState <Function> : функция, которая будет вызвана для регидратации ранее сохранившегося состояния. По умолчанию использование storage .
setState <Function> : функция, которая будет вызвана для сохранения данного состояния. По умолчанию использование storage .
filter <Function> : функция, которая будет вызвана для фильтрации любых мутаций, которые в конечном итоге запускают setState на хранилище. По умолчанию () => true .
overwrite <Boolean> : при регидратировании, будь то перезаписать существующее состояние с выводом из getState напрямую, вместо того, чтобы объединить два объекта с deepmerge . По умолчанию false .
arrayMerger <Function> : функция для слияния массивов при повторном состоянии. По умолчанию function (store, saved) { return saved } (сохраненное состояние заменяет поставляемое состояние).
rehydrated <Function> : функция, которая будет вызвана, когда регидрация закончена. Полезно, когда вы используете nuxt.js, который регидрация сохраняемого состояния происходит асинхронно. По умолчанию store => {}
fetchBeforeUse <Boolean> : логический, указывающий, следует ли извлечь государство из хранилища до использования плагина. По умолчанию false .
assertStorage <Function> : переопределяемая функция для обеспечения доступного хранилища, запускаемой при инициализации плагинов. По умолчанию One выполняет операцию по делектированию записи в данном экземпляре хранения. Примечание, поведение по умолчанию может привести к ошибке (например DOMException: QuotaExceededError ).
Если это не идеально, чтобы состояние магазина Vuex внутри LocalStorage. Можно легко реализовать функциональность для использования файлов cookie для этого (или любого другого, о котором вы можете подумать);
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 ) ,
} ,
} ) ,
] ,
} ) ;Фактически, любой объект после протокола хранения (GetItem, SetItem, RemoveItem и т. Д.)
createPersistedState ( { storage : window . sessionStorage } ) ;Это особенно полезно, когда вы используете этот плагин в сочетании с рендерингом на стороне сервера, где можно передать экземпляр Dom-storage.
Если вам нужно использовать локальное хранилище (или вы хотите), но вы хотите не дать злоумышленникам легко проверять сохраненные данные, вы можете запутать их.
Важный
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 ) ,
} ,
} ) ,
] ,
} ) ; Поскольку это может кажется, на первый взгляд, невозможно передать экземпляр LocalForage в качестве свойства storage . Это связан с тем, что все Getters и Setters должны быть синхронными, а методы Localforage асинхронны.
Пожалуйста, смотрите ChangeLog для получения дополнительной информации о том, что изменилось в последнее время.
Спасибо этим замечательным людям (ключ эмодзи):
Робин Ван дер Влетен ? | Себастьян | Борис Грефф | Cícero Pablo | Gurpreet Atwal | Якуб Коралевски | Янкез Ван Возик |
Джофферсон Рамирес Тикез | Джордан Депруз | Хуан Виллегас | Юрг Раст | Карташов Алексей | Леонард Паули | Нельсон Лю |
Нико | Квентин Дрейер | Рафаэль Санье | Родни Рем | Райан Ван | Себастьен Шопен | Джеффджин |
Макартурор | Пол Мелеро | Гийом да Силва | Джонатан Сантерре | Фабио Сантос | Robertgr991 | Jurijskolesnikovs |
Дэвид Бонд | Freek Van Rijt | Илиес Гермеллин | Питер Сиска | Дмитрий Филиппов | Томас Мейц | Neeron Bhatta |
JOAOARAUJO-HOTMART |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
Лицензия MIT (MIT). Пожалуйста, смотрите файл лицензии для получения дополнительной информации.
