vue 数据持久化(刷新保存数据)的探索

对于 PC 端的 VUE 项目来讲,刷新页面导致数据消失是一个绕不开的坑。好在 vuex-persistedstate插件能够解决这个问题。

vuex-persistedstate

它的原理是:

  • 每次 mutation 都将整个 store 保存到本地(localStorage/sessionStorage/cookie);
  • 初始化时用本地数据替换(replaceState)掉 store。

它的代码简洁、逻辑清晰,且对业务代码毫无侵入,可以说是我辈楷模。(剧终...

今天,咱就鸡蛋里挑骨头,站在个人的角度上主观的评评这个方案的缺点。

第一:和 Vuex 绑定,对于大多数项目来说,用 Vuex 基本上是白白增加复杂度。

第二:对于超大型项目来讲,频繁的快照整个 store ,可能会有性能消耗。

第三:需要我们关注什么时候删除本地数据。

那么,有没有其他的可替代方案呢?

onbeforeunload

新的方案,个人觉得应该做到:

  • 不强制,需要才导入
  • 只在关键时刻才保存,这个时机就是页面刷新的那一刻
  • 不依赖除 Vue 外的任何库/框架

经过一番折腾,有了下面的代码 saveBeforeUnload.mixin.js

import Store from "@/utils/sessionStorage";
const CACHE_PREFIX = "CACHE_KEY_";
const getCacheKey = path => CACHE_PREFIX + path;

export default {
  created() {
    const CACHE_KEY = getCacheKey(this.$route.path);
    const CACHE_DATA = Store.get(CACHE_KEY);
    if (CACHE_DATA) {
      Object.assign(this, CACHE_DATA);
      Store.remove(CACHE_KEY);
    }
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      window.onbeforeunload = () => {
        const CACHE_KEY = getCacheKey(vm.$route.path);
        Store.set(CACHE_KEY, vm.$data);
        window.onbeforeunload = null;
      };
    });
  },
};

从文件名可以看出,它其实是一个 mixin,需要在页面中导入。这段代码有如下缺陷:

  • 刷新时,只能保存当前这个页面的数据,如果多个页面都 mixin 了,其他页面的数据不会被保存
  • 由于是 mixin 方式,对业务代码有些许侵入但不影响运行

进化版

如果想要保存多个页面的数据,需要将代码做如下更改:

import Store from "@/utils/sessionStorage";
const CACHE_PREFIX = "CACHE_KEY_";
const getCacheKey = path => CACHE_PREFIX + path;

const handler = {};

export default {
  created() {
    const CACHE_KEY = getCacheKey(this.$route.path);
    const CACHE_DATA = Store.get(CACHE_KEY);
    if (CACHE_DATA) {
      Object.assign(this, CACHE_DATA);
      Store.remove(CACHE_KEY);
    }
  },

  beforeRouteEnter(to, from, next) {
    next(vm => {
      const CACHE_KEY = getCacheKey(vm.$route.path);
      if (handler[CACHE_KEY]) return;

      handler[CACHE_KEY] = () => {
        Store.set(CACHE_KEY, vm.$data);
      }
      window.addEventListener('beforeunload', handler[CACHE_KEY]);
    });
  },

  destroyed() {
    const CACHE_KEY = getCacheKey(this.$route.path);
    if (handler[CACHE_KEY]) {
      window.addEventListener("beforeunload", handler[CACHE_KEY]);
      handler[CACHE_KEY] = null;
    }
  }
};

export function removeCachedData(location) {
  Store.remove(getCacheKey(location.path));
}

并在每次路由 push/replace 时,删除 CACHE_KEY 对应的本地数据,防止旧数据被渲染。

const __push = router.push;
router.push = (location, ...args) => {
  if (typeof location === 'string') {
    location = {
     path: location
    }
  }

  removeCachedData(location);
  __push(location, ...args);
}
posted @ 2020-06-03 18:03  Liaofy  阅读(2501)  评论(0编辑  收藏  举报