Vuex dispatch action时出现Promise undefined报错该如何解决？

报错原因 #

你遇到的报错是异步数据请求时序+属性访问路径错误共同导致的：

1. 接口请求是异步操作，组件首次渲染时，getEmployees 请求还没有返回结果，Vuex中employees模块的state还是初始值：

// 初始状态
state: {
  employees: {}
}

此时你在模板中直接访问results下的深层属性（比如results.data.xxx），就会因为属性不存在抛出undefined错误。等请求完成、mutation更新state后，computed响应式触发页面重渲染，数据就能正常展示，这就是你能看到数据但控制台有报错的原因。
2. 你访问Vuex state的路径错误：employees是你的子模块名，模块内部的state属性也叫employees，正确的取值路径应该是store.state.employees.employees，你现在写的store.state.employees拿到的是整个模块的state对象（{ employees: {} }），而非模块内存储的接口数据，这也会导致属性访问失败。
3. 你提交mutation时传入了完整的axios响应对象，若你模板中直接取业务数据，不需要axios封装的其他响应字段，建议只传response.data减少层级。

修复方案 #

• 修正Vuex取值路径：把computed的取值逻辑修改为：

const results = computed(() => {
  return store.state.employees.employees;
});

• 避免访问不存在的属性：模板中访问深层属性时使用可选链操作符，例如：

<!-- 修改前 -->
<div>{{ results.data.name }}</div>
<!-- 修改后 -->
<div>{{ results?.data?.name }}</div>

• 优化初始值和加载逻辑：可以给employees模块的state设置更贴合接口返回结构的初始值，或者新增loading状态，请求完成前渲染加载占位符，避免渲染依赖接口数据的内容。
• 优化mutation payload：修改action中的提交逻辑，只传需要的业务数据：

if (response.data.success) {
  // 修改前：commit("setEmployees", response);
  commit("setEmployees", response.data);
}

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