vuex persistedstate
v4.1.0
在頁面重新加載之間持續並補充您的Vuex狀態。
不再維護！由於我在日常工作中不使用VUE，因此與Vuex，Nuxt.js和社區使用的其他工具之類的任何變化保持最新狀態非常困難。這就是為什麼我決定停止將業餘時間花在這個存儲庫上的原因。如果您想接管NPM包裝的所有權，請隨時接觸。感謝您對該項目的任何貢獻。
npm install --save vuex-persistedstateUNPKG也可以使用UMD構建：
< 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一起使用。
或配置為安全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 ]
} )可以將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> ：一個可確保存儲的功能，可以在插件的初始化上發射。默認一個人正在給定的存儲實例上執行寫入刪除操作。注意，默認行為可能會丟失錯誤（例如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 } ) ;當您將此插件與服務器端渲染結合使用時，這一點特別有用，可以通過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 ) ,
} ,
} ) ,
] ,
} ) ;乍一看，這可能是不可能通過局部圖案作為storage屬性的。這是由於所有獲取器和設置器都必須同步的事實，並且Localforage的方法是異步的。
有關最近發生了變化的更多信息，請參見ChangElog。
謝謝這些好人（表情符號鑰匙）：
羅賓·範·德·弗萊頓（Robin van der Vleuten） ？ | 塞巴斯蒂安 | 鮑里斯·格拉夫（Boris Graeff） | CíceroPablo | Gurpreet Atwal | jakub koralewski | Jankees van Woezik |
喬夫森·拉米雷斯·蒂克斯（Jofferson Ramirez Tiquez） | 喬丹·德雷斯（Jordan Deprez） | 胡安·維拉加斯 | JürgRast | Kartashov Alexey | 倫納德·保利 | 尼爾森劉 |
尼科 | 昆汀·德雷爾（Quentin Dreyer） | 拉斐爾·薩尼爾（Raphael Saunier） | 羅德尼·雷姆（Rodney Rehm） | 瑞安·王（Ryan Wang） | 塞巴斯蒂安·肖邦 | Jeffjing |
脂肪師 | 保羅·梅羅（Paul Melero） | Guillaume da Silva | 喬納森·桑特雷（Jonathan Santerre） | FábioSantos | Robertgr991 | Jurijskolesnikovs |
大衛·邦德 | Freek Van Rijt | 伊利斯·赫梅林（Ilyes Hermellin） | 彼得·西斯卡（Peter Siska） | 德米特里·菲利波夫（Dmitry Filippov） | 托馬斯·梅茨（Thomas Meitz） | Neeron Bhatta |
Joaoaraujo-hotmart |
該項目遵循全企業規範。歡迎任何形式的貢獻！
麻省理工學院許可證（麻省理工學院）。請參閱許可證文件以獲取更多信息。
