Vue3进阶主题Composition API如何使用

import { reactive, onMounted } from 'vue'import axios from 'axios'export function useData(url) {  const data = reactive({    loading: false,    error: null,    items: []  })  const fetchData = async () => {    data.loading = true    try {      const response = await axios.get(url)      data.items = response.data    } catch (error) {      data.error = error.message    }    data.loading = false  }  onMounted(() => {    fetchData()  })  return {    data,    fetchData  }}

import { useData } from './useData'export default {  setup() {    const { data } = useData('https://api.example.com/data')    return {      data    }  }}

const dataMixin = {  data() {    return {      loading: false,      error: null,      items: []    }  },  methods: {    fetchData() {      this.loading = true      axios.get(this.url)        .then(response => {          this.items = response.data        })        .catch(error => {          this.error = error.message        })        .finally(() => {          this.loading = false        })    }  },  mounted() {    this.fetchData()  }}

export default {  mixins: [dataMixin],  data() {    return {      url: 'https://api.example.com/data'    }  }}