composables 目录下的文件（web前端）

门板_

已于 2024-07-05 11:27:49 修改

阅读量489

点赞数 9

文章标签： vue.js 前端 javascript Composition API

于 2024-07-05 11:03:46 首次发布

本文链接：https://blog.csdn.net/like_a_diamond/article/details/140202590

版权

composables 目录通常用于存放可组合的函数或逻辑，这些函数或逻辑可以在不同的组件中复用。具体来说，composables 目录下的文件通常包含以下内容：

组合式函数 (Composable Functions)：这些函数利用 Vue 3 的组合式 API（Composition API），允许你将组件逻辑提取到可重用的函数中。这使得代码更加模块化和可维护。例如，可以创建一个 useUser 函数来管理用户状态和操作。
状态管理 (State Management)：有时也会在这里管理全局或局部的状态，类似于 Vuex 或 Pinia 中的状态管理，但更灵活。
业务逻辑 (Business Logic)：可以把特定于业务的逻辑提取到这些函数中，从而减少组件的复杂度。例如，表单处理、数据获取等。

示例：

假设你有一个 composables/useUser.js 文件

import { ref } from 'vue';

//export default是默认导出 不加default是命名导出
export function useUser() {
  const user = ref(null);

  const login = (userInfo) => {
    user.value = userInfo;
  };

  const logout = () => {
    user.value = null;
  };

  return {
    user,
    login,
    logout
  };
}

使用：

<script setup>
//如果导出用的export default这里useUser就不加大括号
import {useUser} from '@/composables/useUser';

const { user, login, logout } = useUser();

// 使用 user, login, 和 logout
</script>

总结：

composables 目录的主要目的是为了更好地组织和复用代码，使项目结构更加清晰，逻辑更加模块化。这对于大型应用程序尤其有帮助，可以极大地提高开发效率和代码质量。

ps:

假设你要将 useUser 重命名为 useLocalization，你可以这样做：

//默认导出
import useLocalization from "@/composables/useI18n";
//如果有大括号 即命名导出
//import {useUser as useLocalization} from "@/composables/useI18n";

const { t, locale } = useLocalization();