vue hooks怎么返回异步数据到template？

作者站长头像
站长
· 阅读数 6

问题

vue hooks怎么返回异步数据到template？

代码

hooks

import { reactive } from 'vue'
import axios from 'axios'
export default function () {
  let tableData = reactive()

  const getData = async () => {
    const res = await axios.get('https://cnodejs.org/api/v1/topics')
    tableData = res.data.data
    console.log('tableData', tableData)
  }

  return { tableData, getData }
}

组件

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="title" label="标题" width="180" />
    <el-table-column prop="create_at" label="create_at" />
  </el-table>
</template>

<script setup>
import { onMounted } from 'vue'
import useTable from '../../hooks/useTable'

const { tableData, getData } = useTable()

onMounted(async () => {
  await getData()
})
</script>

数据返回了，但是没有显示在template上

vue hooks怎么返回异步数据到template？

回复
1个回答
avatar
test
2024-06-23

tableData = res.data.data;这一串代码你知道什么意思吗？你把一个指向响应式的变量改变指向了一个字符串还是别的对象，让这个tableDate这个变量失去了响应式。你应该修改成这样：

import { reactive } from "vue";
import axios from "axios";
export default function () {
  let tableData = reactive({ tableData: [] });

  const getData = async () => {
    const res = await axios.get("https://cnodejs.org/api/v1/topics");
    tableData.tableData = res.data.data;
    console.log("tableData", tableData);
  };

  return { tableData, getData };
}

或者这样：

import { ref } from "vue";
import axios from "axios";
export default function () {
  let tableData = ref([]);

  const getData = async () => {
    const res = await axios.get("https://cnodejs.org/api/v1/topics");
    tableData.value = res.data.data;
    console.log("tableData", tableData);
  };

  return { tableData, getData };
}

请你牢记！！不要不要不要不要改变响应式变量的指向！！！！！！！！！！

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容