得益于"组合式函数"，在 Vue3中，组件之间的状态共享比以往任何时候都更加容易。这种新范式引入了一种更有条理、更可扩展的方式来管理整个应用程序的状态和逻辑。

了解组合式函数（Composables）

本质上，组合式函数是一种模式，而不是特定的功能。它通过一个可以保存状态和可重用代码的简单函数来实现。

在 Vue 应用的概念中，"组合式函数"(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 [lodash] 或是 [date-fns]

相比之下，状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

看一下useCounter组合式函数的例子：

javascript 复制代码

import { ref } from 'vue';  
  
export function useCounter(initialValue = 0) {  
  
    const counter = ref(initialValue);  
  
    function increment() {  
        counter.value++;  
    }  
  
    function decrement() {  
        counter.value--;  
    }  
  
    function reset() {  
        counter.value = initialValue;  
    }  
  
    return { counter, increment, decrement, reset };  
}

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

从组件方面，我们可以像这样导入并初始化组合式函数：

xml 复制代码

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

这个例子展示了组合式函数如何帮助代码组织，因为我们的组件非常轻量级并且易于理解。

每次启动此组合式函数时，都会创建一个新的计数器变量， 以保持实例之间的状态分离。

但是，在某些情况下，实例之间需要共享状态。这可以通过在可组合函数外部声明状态来实现：

csharp 复制代码

import { ref } from 'vue';  

const sharedState = ref();  

export function useComposable() {  
    const localState = ref();  
    return {  
        sharedState,  
        localState  
    };  
}

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

结论

总而言之，组合式函数组件通过提供简单性和自然且易于理解的模块化真正重新定义了 Vue 3。它们可用于抽象组件的复杂性，并在组件之间共享状态。

Vue3 中的组合式函数（Composables）

了解 组合式函数（Composables）

结论

了解组合式函数（Composables）