1. 安装起步
npm i -S vuex-persistedstate
2. 配置使用
//在vuex里面引入。
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
3.自定义存储方式
vuex-persistedstate默认使用localStorage来固化数据,一些特殊情况要如何应对呢?(如:safari的无痕浏览模式)
//需要使用sessionStorage的情况
plugins: [
persistedState({ storage: window.sessionStorage })
]
import * as Cookies from 'js-cookie'
//使用cookie的情况
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
//指定需要持久化的state,配置如下
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的assessmentData
assessmentData: val.assessmentData
}
}