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

以上关于09. Nuxt3模块化代码之Composable文件夹的试用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。