Vue3小技巧-业务逻辑Hooks封装

发表于 更新于 分类于 阅读次数：

前言

随着 Vue 更新到 3.x 版本，出现了一个新的代码组织方式-组合式 API。以前 Vue2.x 到代码书写风格是选项式 API。

具体可以去vue 官网查看

但是在实际代码编写过程中，组合式 API 一大坨代码都放在一起。不利于后期代码维护，本人小菜鸟一枚就思考是否有什么设计模式或者什么解决的方法。一开始采用的就是普通的分函数这种，但是后面觉得维护起来也很麻烦，问了大佬之后总结出一部分经验。

有状态函数和无状态函数

在开始 Hooks 这种方式之前，了解下什么是有状态函数和无状态函数。这对后面 Hooks 编写有很大的帮助。

有状态函数

举个例子，假设你有一个计数器函数，它会记录它被调用了多少次。这个函数就是一个有状态函数，因为它的行为取决于它的内部状态（即计数器的当前值）。

1
2
3
4
5
6
7
8
9
10
11
12
function counter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const c = counter();
console.log(c()); // Output: 1
console.log(c()); // Output: 2
console.log(c()); // Output: 3

这个函数的定义包含一个匿名函数，它使用闭包来访问外层函数的变量 count。在调用 counter() 时，它会创建一个新的 count 变量并返回这个匿名函数的引用。每次调用这个匿名函数时，它会增加 count 的值并返回当前的 count 值。这就是一个有状态函数的例子。

无状态函数

无状态函数是指不依赖于任何外部状态的函数。这种函数的输出只与它的输入有关，并且没有任何内部状态需要保存。无状态函数通常更容易测试和维护，因为它们不会受到外部环境的干扰。

例如，下面是一个无状态函数的例子，它接受两个数字并返回它们的和：

1
2
3
4
5
6
function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // Output: 3
console.log(add(3, 4)); // Output: 7

这个函数的输出完全取决于它的输入，并且没有任何内部状态需要保存。因此，这是一个无状态函数。

业务逻辑 Hooks 封装

Vue 3 中的 Hooks 是一种新的方式来组织和复用代码。它们可以让你在组件之间复用状态逻辑，而不必使用类组件。

要把业务封装成 Hook，你需要定义一个函数，这个函数可以使用 Vue 3 中的内置 Hooks（如 ref 和 computed）来处理状态和副作用。这里就用到了有状态函数。

例如，假设你要封装一个 Hook 来获取并缓存一个远程数据。你可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ref, computed, onMounted } from "vue";

function useRemoteData(url) {
  const data = ref(null);
  const isLoading = ref(true);
  const error = ref(null);

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
      isLoading.value = false;
    } catch (e) {
      error.value = e;
      isLoading.value = false;
    }
  };

  onMounted(fetchData);

  return { data, isLoading, error };
}

这样，你就可以在多个组件中复用获取远程数据的逻辑了。