面试题：Vue Router 切换路由时，如何实现草稿保存的功能？

在 Vue Router 切换路由时实现草稿保存功能，通常是为了防止用户在填写表单或编辑内容时，因误操作或页面跳转而丢失未保存的数据。以下是实现草稿保存功能的几种常见方法：

1. 使用 Vuex 或 Pinia 保存草稿

将草稿数据存储在 Vuex 或 Pinia 中，确保数据在路由切换时不会丢失。

实现步骤：

定义 Vuex Store：

   // store/modules/draft.js
   export default {
     state: {
       formData: {}, // 保存草稿数据
     },
     mutations: {
       saveDraft(state, data) {
         state.formData = data; // 更新草稿数据
       },
       clearDraft(state) {
         state.formData = {}; // 清空草稿数据
       },
     },
   };

在组件中保存草稿：

   <template>
     <form @submit.prevent="submitForm">
       <input v-model="formData.name" placeholder="Name" />
       <input v-model="formData.email" placeholder="Email" />
       <button type="submit">Submit</button>
     </form>
   </template>

   <script>
   import { mapState, mapMutations } from 'vuex';

   export default {
     data() {
       return {
         formData: { ...this.$store.state.draft.formData }, // 初始化表单数据
       };
     },
     computed: {
       ...mapState('draft', ['formData']),
     },
     methods: {
       ...mapMutations('draft', ['saveDraft', 'clearDraft']),
       submitForm() {
         // 提交表单逻辑
         this.clearDraft(); // 清空草稿
       },
     },
     beforeRouteLeave(to, from, next) {
       this.saveDraft(this.formData); // 离开路由前保存草稿
       next();
     },
   };
   </script>

在路由守卫中保存草稿：

   // router/index.js
   router.beforeEach((to, from, next) => {
     const draftData = store.state.draft.formData;
     if (draftData) {
       // 可以在这里将草稿数据保存到 localStorage 或其他存储
     }
     next();
   });

2. 使用 localStorage 保存草稿

将草稿数据存储在 localStorage 中，确保即使页面刷新或关闭，数据也不会丢失。

实现步骤：

保存草稿到 localStorage：

   // utils/draft.js
   export const saveDraft = (key, data) => {
     localStorage.setItem(key, JSON.stringify(data));
   };

   export const loadDraft = (key) => {
     const data = localStorage.getItem(key);
     return data ? JSON.parse(data) : null;
   };

   export const clearDraft = (key) => {
     localStorage.removeItem(key);
   };

在组件中使用：

   <template>
     <form @submit.prevent="submitForm">
       <input v-model="formData.name" placeholder="Name" />
       <input v-model="formData.email" placeholder="Email" />
       <button type="submit">Submit</button>
     </form>
   </template>

   <script>
   import { saveDraft, loadDraft, clearDraft } from '@/utils/draft';

   export default {
     data() {
       return {
         formData: loadDraft('formDraft') || { name: '', email: '' }, // 初始化表单数据
       };
     },
     methods: {
       submitForm() {
         // 提交表单逻辑
         clearDraft('formDraft'); // 清空草稿
       },
     },
     beforeRouteLeave(to, from, next) {
       saveDraft('formDraft', this.formData); // 离开路由前保存草稿
       next();
     },
   };
   </script>

3. 使用路由元信息（meta）

通过路由的 meta 字段标记需要保存草稿的页面，结合 Vuex 或 localStorage 实现草稿保存。

实现步骤：

定义路由 meta：

   // router/index.js
   const routes = [
     {
       path: '/form',
       component: FormPage,
       meta: { requiresDraft: true }, // 标记需要保存草稿
     },
   ];

在全局路由守卫中处理草稿：

   router.beforeEach((to, from, next) => {
     if (from.meta.requiresDraft) {
       const draftData = store.state.draft.formData; // 从 Vuex 获取草稿数据
       saveDraft('formDraft', draftData); // 保存到 localStorage
     }
     next();
   });

4. 使用 Composition API（Vue 3）

在 Vue 3 中，可以使用 Composition API 结合 watchEffect 或 watch 监听表单数据的变化，并自动保存草稿。

实现步骤：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" placeholder="Name" />
    <input v-model="formData.email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref, watchEffect } from 'vue';
import { saveDraft, loadDraft, clearDraft } from '@/utils/draft';

export default {
  setup() {
    const formData = ref(loadDraft('formDraft') || { name: '', email: '' });

    // 自动保存草稿
    watchEffect(() => {
      saveDraft('formDraft', formData.value);
    });

    const submitForm = () => {
      // 提交表单逻辑
      clearDraft('formDraft'); // 清空草稿
    };

    return {
      formData,
      submitForm,
    };
  },
};
</script>

5. 结合后端保存草稿

如果草稿数据需要持久化，可以将草稿数据保存到后端服务器。

实现步骤：

定义 API：

   // api/draft.js
   export const saveDraftToServer = (data) => {
     return axios.post('/api/draft', data);
   };

   export const loadDraftFromServer = () => {
     return axios.get('/api/draft');
   };

在组件中使用：

   beforeRouteLeave(to, from, next) {
     saveDraftToServer(this.formData).then(() => {
       next();
     });
   }

总结

实现 Vue Router 切换路由时的草稿保存功能，可以通过以下方式：

Vuex 或 Pinia：适合全局状态管理。
localStorage：适合持久化保存草稿数据。
路由元信息：结合 Vuex 或 localStorage 实现更灵活的控制。
Composition API：在 Vue 3 中实现自动保存。
后端保存：适合需要持久化到服务器的场景。

根据项目需求选择合适的方式，确保用户在切换路由时不会丢失未保存的数据。

THE END