玩转Vue3之Composables

2024-03-08 18:01 由 CodeForBetter 发表于 #前端开发

前言

Composables 称之为可组合项，熟悉 react 的同学喜欢称之为 hooks ，由于可组合项的存在，Vue3 中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织性和可扩展性的方式来管理整个应用程序的状态和逻辑。

什么是Composables

本质上，可组合项是一种模式而不是特定的功能。它是通过一个简单的函数来实现的，该函数可以保存状态和可重用的代码。总的来说:可组合项是可重用的有状态函数。它们可用于在组件之间共享响应式状态和逻辑。

如何定义

下面通过一段代码看看什么是可组合项:

import { ref } from 'vue';

// 定义可组合项需以use开头 比如 useXXX
export function useCounter(initialValue = 0) {
 // 可组合项都有自己的生命周期 你完全可以使用Composition API
  const counter = ref(initialValue);

  function increment() {
    counter.value++;
  }

  function decrement() {
    counter.value--;
  }

  function reset() {
    counter.value = initialValue;
  }
 // 返回其他组件需要访问的所有内容。
  return { counter, increment, decrement, reset };
}

我们将 counter 声明为响应式状态以及三个操作它的函数,请注意，可组合项必须返回其他组件可以访问的所有内容。

如何使用

从组件方面，我们可以像这样导入和初始化可组合项：

<template>
  <div>
    <h3>Counter Value: {{ counter }}</h3>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script setup>
import { useCounter } from './useCounter'; 

const { counter, increment, decrement, reset } = useCounter();
</script>

尝试一下
试试这个例子

此示例展示了可组合项如何让我们的组件非常轻量且易于理解。每次使用可组合项时，都会创建一个新的计数器变量，以保持实例之间的状态分离。

使用可组合项进行共享状态

在某些情况下，需要实例之间共享状态,我们知道 Vue3 中组件通信方式有很多种比如 props,emits,provide甚至一些状态管理库比如 pinia。其实可组合项也可以达到同样的目的，可以通过在可组合函数外部声明状态来实现：

import { ref } from 'vue';

// 外部进行声明状态
const sharedState = ref();

export function useComposable() {
  // 内部声明状态每次都会初始化
  const localState = ref();

  return { sharedState, localState };
}

这种方法展示了可组合性的灵活性，让我们能够以对每个实例单独或在它们之间共享的方式管理状态。

总结

总而言之，可组合性通过提供自然且易于理解的简单性和模块化性，真正重新定义了 Vue3。它们可用于从组件中抽象出复杂性，还可在组件之间共享状态。强烈推荐大家运用起来。