Vuex getter返回undefined，页面刷新后正常的技术问题求助

从你的代码来看，问题的根源出在getters中直接修改了Vuex的原始state数组，导致路由跳转后state里的courses数据被意外篡改，第一次进入组件时找不到对应课程，刷新后state重新初始化才恢复正常。

具体问题分析 #

你的courses和coursesPaginated getter都直接操作了state.courses的原数组：

• courses getter里，let array = state.courses只是复制了数组引用，后续的排序操作直接修改了原state数组
• coursesPaginated getter里的state.courses.splice(0, size)直接从原state数组中删除元素，导致后续courseById getter查找时，原数组已经没有对应数据了

当你第一次访问页面时，这些getters先执行，把state.courses的原数据改乱/清空；刷新页面后，Vuex重新初始化state，数据恢复，所以功能正常。

修复方案 #

修改getters，始终操作原数组的副本，避免直接修改state：

1. 修改courses getter（随机排序逻辑）

courses: state => {
  // 创建原数组的副本，避免修改state
  let array = [...state.courses]; 
  let currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
},

2. 修改coursesPaginated getter

coursesPaginated: state => {
  let arrays = [], size = 3;
  // 创建副本，不要直接操作原state数组
  let courseCopy = [...state.courses];
  while (courseCopy.length > 0) {
    arrays.push(courseCopy.splice(0, size));
  }
  return arrays;
},

3. 可选优化courseById getter

提前统一id类型，避免每次重复转换：

courseById: state => id => {
  const targetId = parseInt(id);
  return state.courses.find(course => course.id === targetId);
}

额外建议 #

• 在Vuex中，state必须通过mutations修改，getters应该是纯函数，只做数据查询/转换，不能修改原始state，这是Vuex的核心规范之一。
• 如果组件需要在路由参数变化时重新获取数据，可以监听$route的变化：

watch: {
  '$route.params.id'(newId) {
    this.course = this.courseById(newId);
  }
},

这样修改后，就能避免state被意外篡改，courseById getter每次都能从完整的原始state数组中找到对应课程，不会再出现undefined的情况。

内容的提问来源于stack exchange，提问作者Luis Contreras Guerra