Vuex 突破页面刷新，持久化数据秘籍

2023-11-13 07:19:52

使用 sessionStorage 持久化 Vuex 数据，让状态安然度过页面刷新

在 Vue.js 单页面应用中，Vuex 作为状态管理工具，负责维护全局状态。然而，当页面刷新时，Vuex 中存储的数据会被初始化，给开发带来困扰。本文将深入探讨如何使用 sessionStorage 来持久化 Vuex 数据，确保状态在页面刷新后安然无恙。

认识 sessionStorage

sessionStorage 是一个浏览器端的 API，用于在当前会话中存储数据。它不同于 localStorage，在会话结束后（关闭浏览器窗口或标签页）会自动清除。这种特性使其非常适合存储页面级的临时数据，避免数据永久驻留在浏览器中。

持久化 Vuex 数据

为了在页面刷新后保留 Vuex 数据，我们可以将它存储在 sessionStorage 中。具体步骤如下：

创建 mutation： 定义一个名为 saveToSessionStorage 的 mutation，用于将 Vuex 状态序列化并存储到 sessionStorage 中。
监听路由更改： 在 Vue.js 路由系统中监听 beforeunload 事件，该事件会在浏览器关闭前触发。在事件处理函数中调用 saveToSessionStorage mutation。
页面刷新后恢复数据： 在 Vuex 的 state 中添加一个名为 recoveredData 的属性，用来存储从 sessionStorage 中恢复的数据。
在页面加载时恢复数据： 在 Vuex 的 created hook 中，尝试从 sessionStorage 中获取已序列化的数据。如果存在，则将其反序列化并存储到 recoveredData 属性中。

示例代码

// vuex/mutations.js
export const saveToSessionStorage = (state) => {
  const serializedState = JSON.stringify(state);
  sessionStorage.setItem('vuexState', serializedState);
};

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
  routes: [/* ... */]
});

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    return next(false);
  }
  next();
});

router.beforeUnload((to, from, next) => {
  this.$store.commit('saveToSessionStorage');
  next();
});

// vuex/state.js
export const state = {
  recoveredData: null
};

// vuex/created.js
export const created () {
  const recoveredData = sessionStorage.getItem('vuexState');
  if (recoveredData) {
    this.$store.state.recoveredData = JSON.parse(recoveredData);
  }
};