vuex-persistedstate
安装
npm install vuex-persistedstate --save
使用
import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
state: {},
mutations: {},
actions: {},
// 存储到 localStorege
plugins: [createPersistedState()]
// 存储到 sessionStorage
plugins: [createPersistedState({
storage:window.sessionStorage
})]
})
需要持久化的数据
import createPersistedState from "vuex-persistedstate"
const store = newVuex.Store({
state: {},
mutations: {},
actions: {},
plugins: [createPersistedState({
storage:window.sessionStorage,
reducer(val) {
return {
// 只储存state中的token
assessmentData: val.token
}
}
})]
})
vuex-persist
- 它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取
storage
,而是直接将状态保存至 cookie 或者 localStorage
中
安装
npm install --save vuex-persist
or
yarn add vuex-persist
使用
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
plugins: [vuexLocal.plugin]
})
- 通过以上设置,在图3中各个页面之间跳转,如果刷新某个视图,数据并不会丢失,依然存在,并且不需要在每个
mutations
中手动存取 storage
vuex-persist 的详细属性:
key |
string |
将状态存储在存储中的键。默认: 'vuex' |
storage |
Storage (Web API) 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. |
接口必须要有get和set. 默认是: window.localStorage |
saveState |
function (key, state[, storage]) |
如果不使用存储,这个自定义函数将保存状态保存为持久性。 |
restoreState |
function (key[, storage]) => state |
如果不使用存储,这个自定义函数处理从存储中检索状态 |
reducer |
function (state) => object |
将状态减少到只需要保存的值。默认情况下,保存整个状态。 |
filter |
function (mutation) => boolean |
突变筛选。看mutation.type并返回true,只有那些你想坚持写被触发。所有突变的默认返回值为true。 |
modules |
string[] |
要持久化的模块列表。 |