将后端数组推送至Vuex Store失败，报错TypeError: state.push不是函数

错误原因 #

你在Vuex的mutation里直接调用state.push()，但Vuex模块的state是一个对象，不是数组，所以push方法不存在，导致报错。后端返回的是数组，但你需要把数据存到state对象里的某个数组属性中，而非直接操作state本身。

修复步骤 #

1. 检查并修正Vuex模块的state定义
   确保你的TicketSystem模块的state里有一个数组类型的属性（比如boards），初始化为空数组：

   const state = {
     boards: [] // 用来存储后端返回的boards数组
   }
   

2. 修改mutation方法
   把原来直接操作state的代码，改成操作state里的数组属性。根据需求选择两种方式：

   • 如果需要覆盖现有数据（比如每次请求都获取最新的全量数据）：

     export function ADD_BOARDS (state, payload) {
       state.boards = payload;
     }
     

   • 如果需要追加数据（比如分页加载时添加新数据）：

     export function ADD_BOARDS (state, payload) {
       // 用展开运算符把payload数组的每个元素添加进去，避免嵌套数组
       state.boards.push(...payload);
     }
     

3. 验证页面调用逻辑
   你页面中的created钩子写法没问题，确认(await this.$axios.get('https://localhost:7166/boards')).data确实是后端返回的数组[{"id":1,"name":"string"}]即可。

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