Vue3 composables

Vue3 项目中，一般会有 composables 目录 ，它的作用是什么

在 Vue3 项目中，composables 目录主要用于存放你的组合式 API（composable functions）。在 Vue 3.0 中，新增的组合式 API 是一种强大的状态逻辑重用机制，它允许你在多个组件之间共享和重用逻辑，使得你的代码更具可维护性和可读性。

组合式 API 是通过 setup 方法以及一系列的新函数（如 ref，reactive，computed，watch 等等）来实现的。这些函数可以组合在一起，形成可重用的函数，通常称为 "composables" 或 "composable functions"。每一个这样的函数可以包含它自己的状态，计算属性和生命周期钩子，并可以在多个组件之间被重用。

例如，你可能会创建一个 useUser composable，它会处理用户认证、获取用户信息、登出等相关的功能。然后你可以在任何需要这些功能的组件中使用这个 composable，而无需重复编写相同的代码。

这样的代码组织方式会使你的 Vue 项目更清晰、更易于维护，并且更容易测试。因此，一个 composables 目录在 Vue 3 项目中会非常有用。

理解 Vue 3 中的 Composables 重用和组织代码的新方式

在 Vue 3 中，Composables 是一种新的逻辑复用和代码组织方式。Composables 是组合式 API（Composition API）的一部分，它们是一种函数，可以让你在组件之间共享和重用状态逻辑。这种方式比以前的 Mixins 和高阶组件（HOCs）有更好的可读性和更清晰的逻辑。

Composables 是一种函数，通常在 setup() 方法中使用，可以包含自己的状态、计算属性、生命周期钩子等。你可以将 Composables 想象成能够打包和封装组件逻辑的工具。

例如，假设你在多个组件中需要处理一些复杂的用户身份验证逻辑。在这种情况下，你可以创建一个 useAuth() Composable，如下：

import { ref } from "vue";

export default function useAuth() {
  const user = ref(null);

  function login(username, password) {
    // ...登录逻辑...
  }

  function logout() {
    // ...登出逻辑...
  }

  return {
    user,
    login,
    logout
  };
}

然后，你可以在任何需要用户身份验证的组件中使用这个 Composable：

import useAuth from "@/composables/useAuth";

export default {
  setup() {
    const { user, login, logout } = useAuth();

    // ...使用 user, login, logout...

    return {
      // ...返回给模板...
    };
  }
};

这种方式有很多优点。首先，Composables 可以使你的代码更具可读性，因为它们明确了哪些状态和行为是一起的。其次，它们可以帮助你避免在不同组件之间复制粘贴相同的逻辑，从而使你的代码更易于维护。最后，由于 Composables 是纯粹的 JavaScript 函数，你可以非常容易地为它们编写单元测试。