2回答

张轩

2026-03-16

同学你好，这两个问题的原因和解决是：

1. 列表不显示：axios 已经在响应拦截器里把返回值变成 response.data，但 getAndCommit/postAndCommit 仍使用 { data } 解构，导致 mutation 收到的结构错了，rawData.data.list 读不到。

2. 卡片变形：.card-body 被固定成 50px × 50px，内容被挤压；改成 flex 并让宽高自适应后恢复正常布局。

具体代码修改如下：

src/stores/store.ts

// getAndCommit
const data = await axios.get(url)
commit(mutationName, data)
return data

// postAndCommit
const data = await axios.post(url, payload)
commit(mutationName, data)
return data

src/components/ColumnList.vue

<div v-for="column in columnList" :key="column._id" class="col-4 mt-4">
  <div class="card h-100 shadow-sm">
    ...
  </div>
</div>

.card {
  width: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body .btn {
  margin-top: auto;
}

0

1

邺池

谢谢老师！！

2026-03-16

共1条回复

张轩

2026-03-14

同学你好

请问你这个问题解决了吗？我在本地尝试已经没有这个 loading 状态了，数据也能返回，但是列表还没有成功渲染。

0

2

邺池

老师不转圈了，但是列表还是无法显示

2026-03-15

共2条回复