本文是《Nuxt3中文开发教程》的一部分，讲解了如何使用Nuxt3进行模块化代码组织，包括工具包（utils）和公共函数（composables）。composables注重复用，适用于数据管理，而utils提供完整工具集。同时介绍了它们的导入方式和配置，以及在composables中使用useState进行状态管理。
《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。
本教程配套示例在线预览网址：https://www.dvtop.cn
模块化代码包括工具包（utils）和公共函数代码（composables）。
这两项相似性很大，从粒度和范围来看：utils大而全，是单独和完整的工具包，使用起来更简单，推荐工具类相关代码使用；composables小而精，注重复用和自由组合使用，使用起来更灵活，推荐数据类或通过useState共享数据类相关代码使用。
utils和composables中模块可以相互引用，默认情况下Nuxt3会自动导出此两个目录下的第一级文件，如需同时导出此两个目录所有子目录下的文件，增加以下配置即可。
| nuxt.config.ts |
|
| export default defineNuxtConfig({ imports: { dirs: [ 'utils/**', //配置全子目录支持自动导入 'composables/**', ] |
|
最低0.47元/天 解锁文章
扫一扫
1806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
