vuex persistedstate
v4.1.0
페이지 재 장전 사이에 Vuex 상태를 지속하고 재활용하십시오.
더 이상 유지되지 않습니다! 내 일상 업무에서 Vue를 사용하지 않기 때문에 Vuex, Nuxt.js 및 커뮤니티가 사용하는 기타 도구와 같은 변경 사항으로 최신 상태를 유지하기가 매우 어려워집니다. 그렇기 때문에이 저장소에 여가 시간을 보내기로 결정했습니다. NPM에서 패키지의 소유권을 인수하고 싶다면 자유롭게 연락하십시오. 이 프로젝트에 기여한 것에 감사드립니다.
npm install --save vuex-persistedstateUMD 빌드는 UNBKG에서도 사용할 수 있습니다.
< 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 지점을 참조하십시오.
Codesandbox의 기본 예제를 확인하십시오.
또는 JS-Cookie와 함께 사용하도록 구성되었습니다.
또는 Secure-L과 함께 사용하도록 구성되었습니다
새 플러그인 인스턴스는 별도의 파일로 만들 수 있지만 기본 vuex 파일의 플러그인 객체에 가져 와서 추가해야합니다.
/* 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 ]
} )nuxt.js와 함께 vuex-peristedstate를 사용할 수 있습니다. 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> : 상태를 부분적으로 지속시키기위한 모든 경로 배열. 경로가 없으면 완전한 상태가 지속됩니다. 빈 배열이 주어지면 상태가 지속되지 않습니다. 경로는 DOT 표기법을 사용하여 지정해야합니다. 모듈을 사용하는 경우 모듈 이름을 포함하십시오. 예 : "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> 재수 화 될 때, 두 개의 객체를 deepmerge 로 병합하는 대신 getState 의 출력으로 기존 상태를 덮어 쓰야하는지 여부. 기본값으로 false .
arrayMerger <Function> : 재수 화 상태에있을 때 어레이를 병합하는 함수. 기본값 to function (store, saved) { return saved } (저장된 상태가 제공된 상태를 대체).
rehydrated <Function> : 재수 화가 완료 될 때 호출되는 함수. nuxt.js를 사용할 때 유용합니다. 지속 된 상태의 재수 화가 비동기 적으로 발생합니다. 기본값은 store => {}
fetchBeforeUse <Boolean> : 플러그인을 사용하기 전에 상태가 스토리지에서 가져와야하는지를 나타내는 부울. 기본값으로 false .
assertStorage <Function> 에서 저장을 사용할 수 있도록 재정의 가능한 기능, 플러그인의 초기화에서 발사됩니다. Default One은 주어진 스토리지 인스턴스에서 쓰기 텔레트 작업을 수행합니다. 기본 동작은 오류를 던질 수 있습니다 ( DOMException: QuotaExceededError ).
Vuex 매장의 상태를 LocalStorage 내부에 두는 것이 이상적이지 않은 경우. 쿠키를 사용할 수있는 기능을 쉽게 구현할 수 있습니다 (또는 생각할 수있는 다른 것).
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, remoditem 등)을 따르는 모든 객체를 전달할 수 있습니다.
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 속성으로 전달할 수 없습니다. 이는 모든 게터와 세터가 동기식이어야하며 LocalForage의 방법은 비동기식이기 때문입니다.
최근에 변경된 내용에 대한 자세한 내용은 ChangElog를 참조하십시오.
이 멋진 사람들에게 감사합니다 (이모티콘 키) :
로빈 반 데르 벨 루텐 ? | 세바스찬 | 보리스 그레이프 | 시세로 파블로 | Gurpreet atwal | Jakub Koralewski | Jankees Van Woezik |
Jofferson Ramirez Tiquez | 요르단 데프레즈 | 후안 빌레 가스 | Jürg Rast | 카르타 초프 알렉시 | 레너드 폴리 | 넬슨 리우 |
니코 | Quentin Dreyer | 라파엘 사우니에 | Rodney Rehm | 라이언 왕 | Sébastien Chopin | 제프징 |
MacArthuror | 폴 멜로 | 기 illa 다 실바 | 조나단 산 테레 | 파비오 산토스 | Robertgr991 | Jurijskolesnikovs |
데이비드 본드 | Freek van Rijt | Ilyes Hermellin | 피터 시스카 | 드미트리 필리프 | 토마스 메이츠 | Neeron Bhatta |
Joaoaraujo-Hotmart |
이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!
MIT 라이센스 (MIT). 자세한 내용은 라이센스 파일을 참조하십시오.
