Vue学生系统调用栈溢出问题排查及AddStudent组件开发求助

一、调用栈溢出错误（RangeError: Maximum call stack size exceeded） #

核心原因：方法名递归冲突 #

在AdicionarNota组件中，自定义的adicionarNota方法与通过mapActions导入的Vuex action同名，导致调用时无限递归自身：

<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["adicionarNota"]), // 导入的action名为adicionarNota
    adicionarNota() { // 自定义方法名重复
      this.adicionarNota({ id: this.id, nota: this.nota }); // 调用自身，无限递归
    },
  },
};
</script>

修复方案 #

修改自定义方法名，避免与导入的action重名：

<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["adicionarNota"]),
    handleAddNota() { // 重命名自定义方法
      this.adicionarNota({ id: this.id, nota: this.nota });
    },
  },
};
</script>

同时修改模板中的提交事件绑定：

<form @submit.prevent="handleAddNota">

其他次要问题修复 #

1. 学生列表组件重复获取状态
   同时使用mapGetters和mapState获取estudantes会导致冲突，保留其中一种即可：

computed: {
  ...mapGetters(["estudantes"]),
  // 移除...mapState(["estudantes"])
},

2. Vuex mutation拼写错误
   buscarMediaMaioresMenoresNotas action中，commit("SET_NOTAS)", notas)多了一个右括号，修正为：

await commit("SET_NOTAS", notas);

3. 状态字段不匹配
   StudentCard组件computed中取的quantidadeProvas与Vuex state字段不一致，统一字段：

• 修改Vuex state：将quantidadeNotas改为quantidadeProvas

state: {
  // ...其他字段
  quantidadeProvas: null,
},

• 修改SET_ESTUDANTE_ATUAL mutation：

SET_ESTUDANTE_ATUAL(state, estudante) {
  state.estudanteAtual = estudante;
  state.media = estudante.media;
  state.maiorNota = estudante.maiorNota;
  state.menorNota = estudante.menorNota;
  state.quantidadeProvas = estudante.notas.length;
},

二、AddStudent（StudentRegister）组件开发 #

以下是完整的学生注册组件实现：

组件代码 #

<template>
  <div class="student-register">
    <h1>Adicionar Novo Estudante</h1>
    <form @submit.prevent="handleRegisterStudent">
      <label>
        Nome:
        <input type="text" v-model="student.nome" required />
      </label>
      <label>
        Idade:
        <input type="number" v-model.number="student.idade" min="1" required />
      </label>
      <label>
        Curso:
        <input type="text" v-model="student.curso" required />
      </label>
      <button type="submit">Cadastrar Estudante</button>
      <router-link to="/student-list" class="back-link">Voltar para Lista</router-link>
    </form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      student: {
        nome: "",
        idade: null,
        curso: "",
        notas: []
      }
    };
  },
  methods: {
    ...mapActions(["criarEstudante"]),
    async handleRegisterStudent() {
      try {
        await this.criarEstudante(this.student);
        this.$router.push({ name: "studentList" });
      } catch (error) {
        console.error("Erro ao cadastrar estudante:", error);
        alert("Falha ao cadastrar estudante, tente novamente.");
      }
    }
  }
};
</script>

<style scoped>
.student-register {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #eee;
  border-radius: 8px;
}
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  padding: 0.75rem;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #1976d2;
}
.back-link {
  margin-top: 1rem;
  text-align: center;
  color: #2196f3;
  text-decoration: none;
}
.back-link:hover {
  text-decoration: underline;
}
</style>

组件说明 #

• 表单绑定学生基本信息，初始成绩数组为空以匹配后端结构
• 提交时调用Vuex的criarEstudante action，成功后跳转至学生列表
• 包含错误处理逻辑，注册失败时弹出提示
• 基础样式优化，提升页面可读性与交互体验

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