面试题：如何在 Vue 中保存页面的当前状态？

在 Vue 中，保存页面的当前状态是一个常见的需求，尤其是在需要缓存组件状态或实现类似“回到之前页面”功能的场景中。以下是几种常见的实现方式：

1. 使用 `keep-alive` 缓存组件

keep-alive 是 Vue 内置的一个抽象组件，用于缓存动态组件或路由组件的状态。当组件被包裹在 keep-alive 中时，它的状态会被保留，而不会被销毁。

示例

<template>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</template>

缓存特定组件：

  <keep-alive include="ComponentA,ComponentB">
    <component :is="currentComponent"></component>
  </keep-alive>

排除特定组件：

  <keep-alive exclude="ComponentC">
    <component :is="currentComponent"></component>
  </keep-alive>

生命周期钩子：
- activated：组件被激活时调用。
- deactivated：组件被缓存时调用。

  export default {
    activated() {
      console.log('组件被激活');
    },
    deactivated() {
      console.log('组件被缓存');
    },
  };

2. 使用 Vuex 管理全局状态

Vuex 是 Vue 的官方状态管理库，适合管理全局的、跨组件的状态。通过 Vuex，可以将页面的状态保存在全局的 store 中，即使组件被销毁，状态也不会丢失。

示例

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    pageState: {},
  },
  mutations: {
    savePageState(state, payload) {
      state.pageState = { ...state.pageState, ...payload };
    },
  },
  actions: {
    savePageState({ commit }, payload) {
      commit('savePageState', payload);
    },
  },
});

// 组件中使用
export default {
  methods: {
    saveState() {
      this.$store.dispatch('savePageState', { key: 'value' });
    },
    restoreState() {
      const state = this.$store.state.pageState;
      console.log('恢复状态:', state);
    },
  },
};

3. 使用 `localStorage` 或 `sessionStorage`

如果需要持久化页面的状态，可以使用浏览器的 localStorage 或 sessionStorage。

示例

export default {
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    saveState() {
      localStorage.setItem('pageState', JSON.stringify(this.formData));
    },
    restoreState() {
      const state = JSON.parse(localStorage.getItem('pageState'));
      if (state) {
        this.formData = state;
      }
    },
  },
  mounted() {
    this.restoreState();
  },
  beforeDestroy() {
    this.saveState();
  },
};

localStorage：数据永久保存，除非手动清除。
sessionStorage：数据仅在当前会话中有效，关闭浏览器后清除。

4. 使用路由的 `meta` 字段

在 Vue Router 中，可以通过路由的 meta 字段保存页面的状态。

示例

const routes = [
  {
    path: '/page',
    component: PageComponent,
    meta: {
      keepAlive: true, // 是否需要缓存
      scrollPosition: { x: 0, y: 0 }, // 保存滚动位置
    },
  },
];

// 在组件中访问 meta 字段
export default {
  mounted() {
    const scrollPosition = this.$route.meta.scrollPosition;
    window.scrollTo(scrollPosition.x, scrollPosition.y);
  },
  beforeRouteLeave(to, from, next) {
    from.meta.scrollPosition = { x: window.scrollX, y: window.scrollY };
    next();
  },
};

5. 使用 `beforeRouteLeave` 钩子

在路由离开时，可以通过 beforeRouteLeave 钩子保存当前页面的状态。

示例

export default {
  data() {
    return {
      formData: {},
    };
  },
  beforeRouteLeave(to, from, next) {
    localStorage.setItem('formData', JSON.stringify(this.formData));
    next();
  },
  mounted() {
    const savedData = localStorage.getItem('formData');
    if (savedData) {
      this.formData = JSON.parse(savedData);
    }
  },
};

6. 使用第三方库

如果需要更复杂的状态管理，可以使用第三方库，如：

vue-persistedstate：基于 Vuex 的状态持久化插件。
vuex-persist：支持将 Vuex 状态保存到 localStorage 或 sessionStorage。

示例（vuex-persistedstate）

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: {},
  },
  plugins: [createPersistedState()],
});

总结

方法	适用场景	说明
`keep-alive`	缓存组件状态	适合缓存动态组件或路由组件
Vuex	全局状态管理	适合跨组件的状态共享
`localStorage` / `sessionStorage`	持久化状态	适合需要长期保存的状态
路由的 `meta` 字段	保存路由相关的状态	适合保存滚动位置等路由相关的状态
`beforeRouteLeave`	路由离开时保存状态	适合在路由切换时保存状态
第三方库	复杂的状态管理需求	提供更强大的状态管理功能