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

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

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

// 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'
});

// 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

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

浏览量

最后修改于