VUE3-代码抽离和组合

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