Vue多步注册场景如何在Vuex store暂存用户数据后统一提交注册请求

一、修改现有auth模块代码 #

你可以直接在原有auth.module.js基础上新增临时草稿存储相关的状态、突变和动作，修改后的完整代码如下：

import AuthService from "../services/auth.service";
const user = JSON.parse(localStorage.getItem("user"));

const initialState = user
  ? { status: { loggedIn: true }, user, registrationDraft: {} }
  : { status: { loggedIn: false }, user: null, registrationDraft: {} };

export const auth = {
  namespaced: true,
  state: initialState,

  actions: {
    login({ commit }, user) {
      return AuthService.login(user).then(
        (user) => {
          commit("loginSuccess", user);
          return Promise.resolve(user);
        },
        (error) => {
          commit("loginFailure");
          return Promise.reject(error);
        }
      );
    },
    logout({ commit }) {
      AuthService.logout();
      commit("logout");
    },
    // 新增：存储单步注册数据
    saveRegistrationStep({ commit }, stepData) {
      commit("SAVE_REGISTRATION_STEP", stepData);
    },
    register({ commit }, user) {
      return AuthService.register(user).then(
        (response) => {
          commit("registerSuccess");
          // 注册成功后清空临时草稿，避免数据残留
          commit("CLEAR_REGISTRATION_DRAFT");
          return Promise.resolve(response.data);
        },
        (error) => {
          commit("registerFailure");
          return Promise.reject(error);
        }
      );
    },
  },
  mutations: {
    loginSuccess(state, user) {
      state.status.loggedIn = true;
      state.user = user;
    },
    loginFailure(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    logout(state) {
      state.status.loggedIn = false;
      state.user = null;
    },
    registerSuccess(state) {
      state.status.loggedIn = true;
    },
    registerFailure(state) {
      state.status.loggedIn = false;
    },
    // 新增：合并单步数据到注册草稿
    SAVE_REGISTRATION_STEP(state, stepData) {
      state.registrationDraft = { ...state.registrationDraft, ...stepData };
    },
    // 新增：清空注册草稿
    CLEAR_REGISTRATION_DRAFT(state) {
      state.registrationDraft = {};
    }
  },
};

二、页面调用逻辑 #

• 注册页1提交时：收集邮箱、密码数据，调用this.$store.dispatch('auth/saveRegistrationStep', step1Data)，存储完成后跳转到注册页2
• 注册页2提交时：收集个人信息数据，调用saveRegistrationStep存储，完成后跳转到注册页3
• 注册页3提交时：先把当前页的偏好设置存储到草稿，再从this.$store.state.auth.registrationDraft取出完整的注册数据，调用原有register动作提交即可

三、多步骤注册优化方案 #

• 草稿持久化：可以在SAVE_REGISTRATION_STEP突变里同步把registrationDraft存入sessionStorage，页面刷新时从sessionStorage读取草稿恢复数据，避免用户刷新丢失填写内容，注册完成或关闭浏览器时数据会自动清除，安全性较高
• 步骤访问限制：加路由守卫，未完成前序步骤的用户无法直接访问后面的注册页，避免提交数据缺失
• 前置校验：每一步跳转前先做表单合法性校验，只有校验通过才存储数据跳转到下一步，减少无效数据存入
• 敏感数据处理：如果对安全要求较高，临时存储的密码可以做简单加密处理，注册完成后务必及时清除所有临时存储的密码相关数据

内容的提问来源于stack exchange，提问作者roxena