Vue 3 Composables 中的动态 axios 请求 url

Question

我已经尝试过了，它奏效了：

    const posts = ref{[]}
    const urlEndPoint = 'posts'

    const getPosts = async () => {
           let response = await axios.get('/api/'+urlEndPoint)
              posts.value = response.data.data
          }

但那不是动态的。我的目标是使 urlEndPoint 值具有反应性并从组件中设置

然后我尝试了这个：

const urlEndPoint = ref([])

但我不知道如何将urlEndPoint 常量的值从component 发送回composables。

我在我的组件中尝试了这些：

const urlEndPoint = 'posts'

和

const sendUrlEndPoint = () => {
        urlEndPoint = 'posts'
    }

但没有一个工作。

有没有办法实现这个目标？就像以可组合或任何其他简单方式将组件名称发送到 urlEndPoint 值。

Answer 1

定义一个名为 use useFetch 的可组合函数：

import {ref} from 'vue'
export default useFetch(){

   const data=ref([])

   const getData = async (urlEndPoint) => {
           let response = await axios.get('/api/'+urlEndPoint)
              data.value = response.data.data
          }

  return {
     getData,data
 }

在您的组件中导入该函数并像这样使用它：

const urlEndPoint=ref('posts')
const {getData:getPosts, data:posts}=useFetch()

getPosts(urlEndPoint.value)