Vue.js 3+Vuex足球赛事记分功能按主客队正确分配分数问题求解

核心错误点 #

• 拼写错误：Vuex的state中定义的客队分数字段为visitor_poins，缺字母t，和模板中调用的visitor_points不匹配，会导致客队分数无法正常显示
• 变量重置时机错误：savePoint方法中，在判断待加分的球队归属前就重置了this.point，导致判断逻辑读取的是空值，触发逻辑异常
• Vuex Action逻辑错误：加分Action中连续两次调用同名Mutation，单次触发会导致分数+2，且多余的GET请求无实际业务意义
• 语法错误：组件内调用$store.dispatch时未加this，会抛出$store未定义的报错
• 下拉选绑定缺失：主队、客队的下拉选项未显式设置:value，部分场景下会导致v-model绑定值异常

修复后的store.js代码 #

import {createStore} from 'vuex'
import axios from 'axios'

const store = createStore({
  state() { 
    return {
      teams: [],
      house_points: 0,
      visitor_points: 0, // 修正拼写错误
    }
  },
  getters: {
    total_house: state => state.house_points,
    total_visitor: state => state.visitor_points
  },
  mutations: {
    load_team(state, teams){
      state.teams = teams
    },
    count_house_points (state) {
      state.house_points++
    },
    count_visitor_points (state) {
      state.visitor_points++
    },
  },
  actions: {
    load({commit}) {
      axios.get('http://localhost:3000/teams').then(({data}) => {
        commit('load_team', data)
      })
    },
    // 移除多余的重复commit和无意义GET请求
    count_house_points ({commit}) {
      commit('count_house_points')
    },
    count_visitor_points ({commit}) {
      commit('count_visitor_points')
    },
  }
})

export default store

修复后的组件代码 #

模板部分（修正下拉选绑定） #

<template>
  <label class="form-label">House Team</label>
  <select class="form-control" v-model="match.house_team">
    <!-- 显式设置value -->
    <option v-for="(team, index) in teams" :key="index" :value="team.name">
      {{ team.name }}
    </option>
  </select>
  <label class="form-label">Visitor Team</label>
  <select class="form-control" v-model="match.visitor_team">
    <!-- 显式设置value -->
    <option v-for="(team, index) in teams" :key="index" :value="team.name">
      {{ team.name }}
    </option>
  </select>

  <h4>Scoreboard</h4>
  <span>{{ $store.state.house_points }}</span> x <span>{{ $store.state.visitor_points }}</span>

  <h4>Score Points</h4>
  <label class="form-label">Team</label>
  <select v-model="point.team">
    <option v-for="team in teams" :key="team.id" :value="team.name">
      {{ team.name }}
    </option>
  </select>

  <span v-if="loading">Loading...</span>
  <button v-else @click="savePoint" type="button" class="btn btn-primary">Score Point</button>
</template>

script部分（修正savePoint逻辑） #

仅修改savePoint方法即可，其余代码保持不变：

methods: {
  savePoint(){
    this.loading = true;
    // 提前暂存本次提交的球队名，避免后续重置后丢失
    const currentScoreTeam = this.point.team
    if(this.editing){
      axios.put(`${URL_points}/${this.point.id}`, 
      { ...this.point })
        .then(() => {
          Object.assign(this.editing, this.point)
          this.point = newPoint()
          this.loading = false
          this.editing = false
      })
    } else {
      axios.post(URL_points, 
      {...this.point})
        .then(() => {
        this.points.push(this.point)
        this.loading = false;
        // 先判断加分逻辑，再重置point
        if(currentScoreTeam === this.match.house_team){
          // 加this调用store
          this.$store.dispatch('count_house_points')
        } else if(currentScoreTeam === this.match.visitor_team) {
          this.$store.dispatch('count_visitor_points')
        } else {
          // 可选：添加非对阵球队的提示
          alert('只能选择当前对阵的两支球队加分')
        }
        // 把重置point的逻辑移到判断之后
        this.point = newPoint({params: {team_id: this.point.team}}, Math.max(...this.points.map(p => p.id)));
      })
    }
  },
}

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