VUE3的通用函数如何共享?_vue3 共用函数-CSDN博客

在 Vue3 项目中，为了方便所有组件都能调用通用函数（如 formatTimestamp()），我们应该将这些函数放置在共享的工具文件中。下面是一个详细的说明与实现方式：

1. 创建工具文件

在项目目录中创建一个 utils 文件夹（如果还没有的话）。在这个文件夹中创建一个 dateUtils.js 文件。

// utils/dateUtils.js
export function formatTimestamp(timestamp) {
  const date = new Date(timestamp);

  const pad = (num) => num.toString().padStart(2, '0');

  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

2. 导出工具函数

在 dateUtils.js 中使用 export 关键字导出 formatTimestamp 函数，这样其他文件就可以导入并使用它。

3. 在组件中导入和使用

在需要使用 formatTimestamp 函数的组件中，通过 import 语句导入该函数。

<script setup>
import { formatTimestamp } from '@/utils/dateUtils.js';

// 现在可以使用 formatTimestamp 函数了
</script>

4. 考虑使用 TypeScript（可选）

如果项目使用 TypeScript，可以为工具函数添加类型注解，以提高代码的可读性和安全性。

// utils/dateUtils.ts
export function formatTimestamp(timestamp: number): string {
  const date = new Date(timestamp);

  const pad = (num: number): string => num.toString().padStart(2, '0');

  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1);
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

然后在组件中导入和使用：

<script setup lang="ts">
import { formatTimestamp } from '@/utils/dateUtils.ts';

// 现在可以使用 formatTimestamp 函数了
</script>

5. 将工具文件放在合理的位置（可选）

通常，我们会在项目中创建一个 utils 或 helpers 文件夹来存放这些工具函数。这样可以保持项目结构的整洁，并且方便查找和维护。

your-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── utils/          <-- 工具文件夹
│   │   └── dateUtils.js
│   ├── App.vue
│   └── main.js
├── .gitignore
├── package.json
└── vite.config.js

为什么这样做？

代码复用：将通用函数放在一个共享文件中，可以避免重复代码，提高代码复用率。
集中管理：所有与日期相关的操作都集中在一个文件中，方便维护和更新。
易于测试：将函数从组件中分离出来，更容易编写单元测试。
性能优化：避免在每个组件中重复定义相同的函数，减少代码体积。

总结

将通用函数（如 formatTimestamp）放在一个共享的工具文件中（如 utils/dateUtils.js），然后在需要的组件中导入和使用，是一种良好的实践。这样可以保持代码的整洁、可维护性和可复用性。如果项目使用 TypeScript，还可以为工具函数添加类型注解，以提高代码质量和安全性。