1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

  }

}

1

2

3

4

5

6

7

8

9

import { useData } from './useData'

export default {

  setup() {

    const { data } = useData('https://api.example.com/data')

    return {

      data

    }

  }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

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()

  }

}

1

2

3

4

5

6

7

8

export default {

  mixins: [dataMixin],

  data() {

    return {

      url: 'https://api.example.com/data'

    }

  }

}