组合式函数抽离页面数据处理逻辑

Vue的官方文档在插槽部分介绍了无渲染组件的封装思路,但是也指出了使用无渲染组件的方式会引入多余的组件开销,并且在组合式函数部分的内容中提出,使用组合式函数实现无渲染组件设计的思路.这里是一个示例:

<template>
  <h1>新闻页面</h1>

  <div class="container card">
    <div v-for="item in response" :key="item.id" class="news-item">
      <el-image
        :src="item.picUrl"
        :alt="item.title"
        :preview-src-list="[item.picUrl]"
        fit="contain"
        :max-scale="4"
        :min-scale="2"
      />
      <div class="news-content">
        <p class="card-title">{{ item.title }}</p>
        <p class="card-text">{{ item.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import useNews from '@/composables/api/useNews.js'

const { response } = useNews()
</script>

可以看出,在页面上我们没有处理任何的数据请求和返回处理,而是使用useNews 获取到了数据结果.下面useNews 的代码

import { ref } from 'vue'
import request from '@/composables/api/core/request.js'
export default function useNews() {
  const response = ref([])
  const error = ref(null)

  const postData = {
    ...
  }

  request
    .postForm('/api/fapigx/internet_news/query', postData)
    .then((res) => {
      response.value = res.result.newslist
    })
    .catch((err) => {
      error.value = err
    })

  return { response, error }
}

useNews 中处理了数据的请求逻辑,并返回了最终结果,引入request.js 是axios 的封装