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

Question

问题

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上

Answer 1

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 };
}

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