要求
安装
$ npm install vuex-persistedstate--save-dev
用法
import createPersistedState from ‘vuex-persistedstate‘ const store = new Vuex.Store({ // ...这样配置表示把VUEX中的所有数据存到localStorage中
plugins: [createPersistedState()] })API
createPersistedState([options])
使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：
-
key <String>：存储持久状态的键。（默认：vuex） -
paths <Array>：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]） -
reducer <Function>：一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值。 -
subscriber <Function>：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler) -
storage <Object>：而不是（或与）getState和setState。默认为localStorage。 -
getState <Function>：将被调用以重新水化先前持久状态的函数。默认使用storage。 -
setState <Function>：将被调用来保持给定状态的函数。默认使用storage。 -
filter <Function>：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
自定义存储
如果在本地存储中存储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),
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的实例。
Local?LocalForage??
因为它可能看起来乍一看，它不可能作为属性传递一个LocalForage实例storage。这是因为所有的getter和setter必须是同步的，LocalForage的方法是异步的。