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

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