# 解决思路
// @/store/plugins/createPersistedPlugin.js
export default function createPersistedPlugin(
options = { key: 'store' }
) {
return store => {
// 1. 判断`sessionStorage`中是否有`Vuex`快照
let sessionStore = JSON.parse(sessionStorage.getItem(options.key))
// 若无,则使用初始值, 否则使用快照的值
sessionStore && store.replaceState(sessionStore)
// 临时工,用完就解雇了~
sessionStore = null
// 2. 监听`Vuex`中`mutation`的变化
store.subscribe((mutation, state) => {
// 3. 动态存储`Vuex`快照至`sessionStorage`中
sessionStorage.setItem(options.key, JSON.stringify(state))
})
}
}
# 使用
// @/store/index.js
import createPersistedPlugin from './plugins/createPersistedPlugin.js'
const persistedPlugin = createPersistedPlugin()
const store = new Vuex.Store({
state,
// 其他代码
mutations,
plugins: [persistedPlugin]
})