vue composition-api 封装组合式函数的操作方法

下面是对“Vue composition-api 封装组合式函数的操作方法”的详细讲解攻略：

什么是 Vue Composition API

Vue Composition API 是 Vue 3 新增的 API ，用于更灵活的组合逻辑复杂的逻辑和行为。它与 Vue 2.x 中的 Options API 不同，Options API 是基于选项进行开发的。在 Options API 中，开发者需要将数据和方法分别定义在 Vue 的 data 和 methods 属性中。

在使用 Composition API 时，我们可以将相关代码更紧凑地组织在一起，可以通过组合的方式，把一些相关逻辑和行为装在一起。Vue Composition API 是面向函数编程的思想。开发者可以使用函数式编程技巧来组合逻辑。

为什么要封装组合式函数

在使用 Composition API 开发 Vue 3 项目时，我们可能会发现某些逻辑和行为是需要被重复利用的。而为了更加优雅地重复使用逻辑和行为，我们可以将它们封装成组合式函数。

组合式函数是一种将 Vue Composition API 结合起来，形成一系列功能强大的函数的方式。通过组合式函数的方式，我们可以将某些通用的逻辑和行为复用到某些页面、组件或配合其它行为。

如何封装组合式函数

定义一个组合式函数

要封装组合式函数，我们只需要定义一个函数，这个函数包含我们要执行的逻辑，然后返回定义出来的响应式对象。

下面，我们以一个示例说明，假设我们有一个组件，其中要用到 call api，并将接口返回的数据赋值给组件中的 data 属性。那么我们可以创建一个函数，名为 useApi：

import { reactive } from 'vue'

function useApi() {
  const state = reactive({
    loading: true,
    data: null,
    error: null,
  })

  const fetchData = async (url) => {
    try {
      const response = await fetch(url)
      const jsonData = await response.json()
      state.data = jsonData
      state.error = null
    } catch (error) {
      state.error = error
    } finally {
      state.loading = false
    }
  }

  return { state, fetchData }
}

export default useApi

在这个函数里面，我们使用 reactive 创建了 state 对象，其中包含了组件所需的 loading、data 和 error 等响应式属性，然后，我们声明了一个异步函数， fetchData，这个函数将调用接口并更新 state 中的数据。最后，我们通过 return 语句将 state 和 fetchData 对象返回。

使用以上 useApi 函数的示例代码如下：

import useApi from './useApi'

export default {
  setup() {
    const { state, fetchData } = useApi()

    fetchData('https://jsonplaceholder.typicode.com/todos/1')

    return { state }
  },
}

我们简单地调用了 useApi 函数，然后通过 return 返回组件中所需的 state 对象，以及调用函数 fetchData 来获取数据。

在 Vue 组件中使用组合式函数

在 Vue 组件中，我们可以使用 setup 函数来调用组合式函数。setup 函数会在组件每次渲染时被调用，类似于 Vue 2.x 中的 created 生命周期钩子函数。

示例如下：

import { ref, watchEffect } from "vue";
import useApi from "./useApi";

export default {
  setup() {
    const { state, fetchData } = useApi()

    const userId = ref(1)

    watchEffect(() => {
      fetchData(`https://jsonplaceholder.typicode.com/users/${userId.value}/todos`)
    })

    return { state, userId }
  }
}

在此示例中，我们使用 watchEffect 监听 userId 的变化，并在变化时调用 fetchData 函数，来获取当前用户的 todo 列表。

总结

通过这篇文章，我们详细了解了 Vue Composition API，并学习了如何使用组合式函数将通用逻辑和行为封装起来，以便在 Vue 3 中更加重用和优雅地组织代码。在具有组件化思想的开发中，我们可以利用 Vue Composition API 和组合式函数将逻辑和行为更加紧密地组织起来，提高代码的可读性和优雅度。