Home.vue
<script setup>
import { ref } from "vue";
import getPosts from "../composibles/getPosts";
import PostList from "../components/PostList.vue"
const {posts,load}=getPosts();
load();
</script>
<template>
<div class="home">
<div v-if="posts.length">
<PostList :posts="posts" />
</div>
<div v-else>
加载中....
</div>
</div>
</template>
<style scoped>
</style>
将获取数据的部分抽离到getPosts.js中:
import { ref } from "vue";
import axios from "axios";
const getPosts = () => {
const posts = ref([]);
const load = async() => {
try {
let { data } = await axios("http://localhost:3003/posts");
posts.value = data;
} catch (error) {
}
}
load();
return { posts ,load}
}
export default getPosts