Fork me on GitHub

实现一个简单的Vuex状态持久化功能

大多数人应该都遇到过 vuexstate 刷新后丢失的问题,这是因为 state 是存储在内存中的,刷新后当然就丢失了。
这里有个方案是每次更改 state 后把 state 存储在 localStorage 中,当初始化 vuex 时再从 localStorage 中取出。

使用 vuex 插件功能可以很方便实现上述方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// plugins/vuex-state-persister.js
export default function(store) {
const Key = '__VUEX_STATE__';
if (localStorage[key]) store.replaceState(JSON.parse(localStorage[Key]));
store.subscribe(function(mutation, state) {
localStorage.setItem(Key, JSON.stringify(state));
});
}
// store/index.js
import createStatePersister from '../plugins/vuex-state-persister';
// ...
export default new Vuex.Store({
// ...
plugins: [createStatePersister],
// 开发环境下启用严格模式,官方文档介绍:https://vuex.vuejs.org/zh/guide/strict.html
strict: process.env.NODE_ENV !== 'production'
});

以上只是一个简单实现,项目中建议使用 vuex-persistedstate