vuex persistedstate
v4.1.0
ページのリロード間でVuex状態を保持し、再水Dします。
もう維持されていません！私は日々の仕事でVueを使用していないため、Vuex、nuxt.js、コミュニティが使用する他のツールなどの変更を最新の状態に保つことが非常に困難になります。だから私はこのリポジトリに余暇を費やすのをやめることにしました。 NPMでパッケージの所有権を引き継ぎたい場合は、お気軽にご連絡ください。このプロジェクトに貢献してくれてありがとう。
npm install --save vuex-persistedstateUMDビルドは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ブランチを参照してください。
CodeSandboxの基本的な例をご覧ください。
またはJS-Cookieで使用するように構成されています。
または、Secure-LSで使用するように構成されています
新しいプラグインインスタンスは別のファイルで作成できますが、メイン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-persistedstateを使用することができます。 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> ：Setup Mutation Subscriptionに呼ばれる関数。デフォルトはstore => handler => store.subscribe(handler)になります。
storage <Object> ： getStateおよびsetState代わりに（または組み合わせて）。デフォルトはLocalStorageになります。
getState <Function> ：以前に持続した状態を再水和するように呼ばれる関数。デフォルトはstorageを使用することです。
setState <Function> ：与えられた状態を持続するように呼ばれる関数。デフォルトはstorageを使用することです。
filter <Function> ：最終的にsetStateをトリガーする突然変異をフィルタリングするために呼び出される関数。デフォルトは() => trueになります。
overwrite <Boolean> ：再水和で、2つのオブジェクトをdeepmergeとマージするのではなく、 getStateからの出力で既存の状態を直接上書きするかどうか。デフォルトはfalseになります。
arrayMerger <Function> ：再水chrating状態のアレイをマージするための関数。 defaultはfunction (store, saved) { return saved } （保存された状態が供給された状態を置き換えます）。
rehydrated <Function> ：再水和が終了したときに呼び出される関数。 nuxt.jsを使用している場合に役立ちます。これは、持続状態の再水和が非同期に発生します。 defaults store => {}
fetchBeforeUse <Boolean> ：プラグインを使用する前に、状態をストレージからフェッチする必要があるかどうかを示すブール値。デフォルトはfalseになります。
assertStorage <Function> ：プラグインの初期化で発射され、ストレージが利用可能になるようにするための過剰な関数。デフォルトの1つは、指定されたストレージインスタンスで書き留め操作を実行しています。注意してください。デフォルトの動作により、エラーが発生する可能性があります（ DOMException: QuotaExceededErrorなど）。
LocalStorage内にVuexストアの最新ストアがあることが理想的でない場合。機能を簡単に実装して、そのために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 } ) ;これは、このプラグインを使用してサーバー側のレンダリングと組み合わせて使用している場合に特に役立ちます。
ローカルストレージを使用する必要があるが（または必要な）、攻撃者が保存されたデータを簡単に検査できないようにしたい場合は、難読化できます。
重要
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 ) ,
} ,
} ) ,
] ,
} ) ;一見すると思われるかもしれませんが、 storageプロパティとしてLocalforageインスタンスを渡すことはできません。これは、すべてのゲッターとセッターが同期しなければならないという事実が原因であり、Localforageの方法は非同期です。
最近変更されたものの詳細については、Changelogをご覧ください。
これらの素晴らしい人々に感謝します（絵文字キー）：
ロビン・ファン・デル・ヴルーテン ？ | セバスチャン | ボリス・グレフ | CíceroPablo | ガープリートアトワル | Jakub Koralewski | ジャンキーズ・ヴァン・ウォージク |
Jofferson Ramirez Tiquez | ジョーダン・デプレス | フアン・ヴィルガス | jürgrast | Kartashov Alexey | レナード・パウリ | ネルソン・リュー |
ニコ | クエンティン・ドレイヤー | ラファエル・ソーニエ | ロドニー・レム | ライアン・ワン | セバスチャンショパン | ジェフジン |
マッカーサー | ポール・メレロ | Guillaume Da Silva | ジョナサン・サンテール | ファビオ・サントス | robertgr991 | jurijskolesnikovs |
デビッド・ボンド | Freek Van Rijt | イリーズ・ヘルメリン | ピーター・シスカ | ドミトリー・フィリッポフ | トーマス・メイツ | ニーロン・バッタ |
Joaoaraujo-hotmart |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
MITライセンス（MIT）。詳細については、ライセンスファイルをご覧ください。
