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 |
该项目遵循全企业规范。欢迎任何形式的贡献！
麻省理工学院许可证（麻省理工学院）。请参阅许可证文件以获取更多信息。
