在前端开发中我们经常会有一些通用的业务逻辑代码，需要模块化管理，这时候就可以试用Composable 这个文件夹来编写。比如我们常用的显示当前时间，这种常用的通用代码，就可以编写成一个单独的代码段，然后在每个页面进行使用。
Composable 中创建 time.ts 的编写
新建一个文件夹composables 然后在文件夹里边，新建一个文件time.ts ，然后编写下面的代码。
这段代码你一定编写过，所以就不给大家讲解里边的具体含义了。你可以直接复制这段代码。
export const getTime=()=>{
const timezone = 8;
const offset_GMT = new Date().getTimezoneOffset();
const nowDate = new Date().getTime();
const today = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
const date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
const time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
const timeString ='当前时间：' + date + ' ' + time;
return timeString;
}
function twoDigits(val) {
if (val < 10) return "0" + val;
return val;
}
写完之后，如何在页面中使用呢？
我们在pages 文件夹下面，新建一个pagesdemo3.vue 的文件，然后你就可以直接在这个页面中使用刚才写的获得时间的方法了。
<template>
<div >{{ time }}</div>
</template>
<script setup>
import { ref } from "vue";
const time = ref(getTime());
</script>
<style scoped></style>
打开浏览器就可以获得当前时间了。 你可以把任何你在项目中经常使用的代码，封装到这个文件夹里，实现代码的复用。这个文件夹的功能和组件很相似，只是组件是 UI 部分的代码复用，而这个是业务逻辑代码的复用。
composables 的引入规则
composables 文件夹的引入规则是，只有顶层文件会被引入。也就是说我们如果在这个文件下再新建一个文件夹，是不会被引入到 页面中实现代码复用的。 比如下面的文件格式就没办法引入：
--|composables ----|test ------|test.ts
但是有一种是例外的，就是我们可以写成下面的这种形式。
--|composables ----|test ------|index.ts
我们这里测试一下，新建一个test 文件夹，然后在它的下面再创建一个index.ts 文件。写入下面的代码：
export const test = ()=>{
console.log('mybj123.com')
}
然后回到Demo3.vue 页面使用test() 方法，结果是可以使用这个方法的。
<template>
<div >{{ time }}</div>
</template>
<script setup>
import { ref } from "vue";
const time = ref(getTime());
test();
</script>
<style scoped></style>
我们在test 文件夹下面，再新建一个test.ts 文件，然后编写代码，如下：
export const testTwo = ()=>{
console.log('我是')
}
你会发现，这种形式是不能直接引入到页面当中进行使用的，会直接报错testTwo is not defined，也就是找不到这个方法。
总结
这节我们主要学习了 Nuxt3 中业务逻辑代码的复用。你可以把每个页面都使用的代码放在composables 文件夹中，然后按需使用就好。但是也要有个度，我虽然没有依据，如果这种方法多起来，会造成页面性能的下降，毕竟每个方法都会引导页面中。