09. Nuxt3模块化代码之Composable文件夹的试用

在前端开发中我们经常会有一些通用的业务逻辑代码，需要模块化管理，这时候就可以试用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 文件夹下面，新建一个\pages\demo3.vue 的文件，然后你就可以直接在这个页面中使用刚才写的获得时间的方法了。

<template>
  <div class="">{{ 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 class="">{{ 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 文件夹中，然后按需使用就好。但是也要有个度，我虽然没有依据，如果这种方法多起来，会造成页面性能的下降，毕竟每个方法都会引导页面中。