Vue项目如何将Store代码提取到Login.vue并处理API校验错误

问题1：Store与Login.vue的代码拆分逻辑 #

• Store保留通用身份相关逻辑（无需提取）：CSRF Cookie初始化、登录API调用、Token持久化存储、全局请求头Authorization设置、登录状态的commit更新，这部分逻辑属于全局通用的身份认证能力，放在Store中可被其他场景复用。
• 需从Store提取到Login.vue的逻辑：路由跳转、登录成功提示、表单重置等和登录页面交互强相关的操作，该类逻辑放到页面中可以避免Store和路由、页面组件耦合，保持Store的简洁性和通用性。

问题2：校验错误抛出与页面处理方案 #

你修改的Store逻辑已经用到了resolve/reject，只需要把整个action包装为Promise返回，即可在Login.vue中通过异步方法拿到返回结果：

修正后完整Store代码 #

// src/modules/auth/store/index
export const AUTH_AUTHENTICATE = "/api/auth/authenticate";

actions: {
  [AUTH_AUTHENTICATE]: ({ commit }, loginForm) => {
    // 外层返回Promise，支持dispatch后链式调用
    return new Promise((resolve, reject) => {
      toolsApi.get("/sanctum/csrf-cookie").then(() => {
        toolsApi
          .post("/api/auth/authenticate", loginForm)
          .then(response => {
            if (response.data.status == "success") {
              const token = `Bearer ${response.data.data.token}`;
              Cookie.set("AUTH-TOKEN", token);
              toolsApi.defaults.headers.common.Authorization = Cookie.get("AUTH-TOKEN");
              commit("setLoginStatus", true);
              resolve(response.data.data);
            } else {
              // 业务逻辑错误（如账号密码错误）抛出
              reject(response.data)
            }
          })
          .catch(error => {
            // 校验错误（422状态码）等HTTP错误抛出
            reject(error.response?.data || error);
          });
      });
    })
  }
}

修正后Login.vue代码 #

<template>My login form is here</template>

<script>
import { AUTH_AUTHENTICATE } from "@/modules/auth/store/index";

methods: {
  async loginFormSubmit() {
    try {
      // 等待登录接口执行完成
      await this.$store.dispatch(AUTH_AUTHENTICATE, this.loginForm);
      // 登录成功后处理页面逻辑
      this.$message.success('登录成功')
      this.$router.push({ name: "dashboard.index" })
      // 可按需添加重置表单、关闭弹窗等操作
      this.loginForm = {email: '', password: ''}
    } catch (err) {
      // 捕获校验错误，绑定到表单提示
      if (err.errors) {
        Object.keys(err.errors).forEach(field => {
          this.formErrors[field] = err.errors[field][0]
        })
        this.$message.error(err.message || '登录失败，请检查输入信息')
      }
    }
  }
}
</script>

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