深入探索 Nuxt3 Composables：掌握目录架构与内置API的高效应用

news2025/1/9 5:28:04

title: 深入探索 Nuxt3 Composables：掌握目录架构与内置API的高效应用
date: 2024/6/23
updated: 2024/6/23
author: cmdragon

excerpt:
摘要：“本文深入探讨了Nuxt3 Composables，重点介绍了其目录架构和内置API的高效应用。通过学习本文，读者将能够更好地理解和利用Nuxt3 Composables来构建高效的应用程序。”

categories:

  • 前端开发

tags:

  • Nuxt3
  • Composables
  • 目录架构
  • 内置API
  • 高效应用程序
  • 构建应用
  • 学习

在这里插入图片描述

在这里插入图片描述

扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

Nuxt3 Composables

1.1 Composables 概述

Composables 是 Vue 3 中的一种新特性，它允许在组件之间共享可复用的逻辑和计算。Composables 是轻量级的，它们不是真正的组件，而是独立的
JavaScript 文件，通常位于~/composables目录下。它们可以包含数据、方法、计算属性等，可以被任何组件导入并使用，从而帮助组织代码，减少重复，并提高代码的可复用性。

1.2 安装与配置

在 Nuxt.js 3 中，由于 Nuxt 本身已经集成了 Vue 3 的 Composables，所以你不需要额外安装。只需在项目中创建一个~/composables
文件夹，然后在其中创建.js或.ts文件来定义你的 Composables。

Nuxt 提供了自动导入和使用 Composables 的支持。在需要使用 Composables 的组件中，只需使用import语句导入，例如：

// components/MyComponent.vue
import { useMyFunction } from "~/composables/myFunction.js"

export default {
  setup() {
    const result = useMyFunction();
    // ...
  }
}

1.3 使用 Composables 的基本步骤

  1. 创建 Composables：在~/composables文件夹中，创建一个文件（如myFunction.js），定义你的函数或计算逻辑。
  2. 导入 Composables：在需要使用的地方，如组件的setup函数中，导入需要的 Composables。
  3. 使用 Composables：在导入后，可以直接使用 Composables 中的变量、方法或计算属性。
  4. 更新和响应式：由于 Vue 3 的响应式系统，当你在 Composables 中修改数据时，依赖于这些数据的组件会自动更新。

1.4 Composables 与 Vue 3 的响应式系统

Composables 中的数据默认是响应式的，因为它们是 Vue 3 组件的一部分。当你在 Composables 中定义一个数据对象或计算属性，并在组件中使用它，Vue
的变更检测系统会在数据变化时自动更新组件。例如：

// myFunction.js
export const myData = ref(0);

export function increment() {
  myData.value++;
}

在组件中：

import { myData, increment } from "~/composables/myFunction.js"

setup() {
  onMounted(() => increment()); // 初始化
  watch(myData, () => console.log('Data updated!')); // 监听数据变化
}

当myData的值改变时，组件中的watch会触发。这就是 Composables 和 Vue 3 响应式系统协同工作的基本方式。

核心 Composables

2.1 useFetch

useFetch是 Nuxt 3 提供的一个核心 Composables，用于简化从 API 获取数据的过程。它封装了异步数据获取的逻辑，使得在组件中获取数据变得简单和直观。

基本用法
  1. 导入 useFetch：在组件中导入useFetch。
  2. 使用 useFetch：在组件的setup函数中调用useFetch，并传入一个 URL 或一个返回 URL 的函数。

示例代码如下：

// components/MyComponent.vue
import { useFetch } from '#app'; // 使用 Nuxt 3 的内置 useFetch

export default {
  setup() {
    const { data, pending, error } = useFetch('/api/data');

    return {
      data,
      pending,
      error
    };
  }
}

在这个例子中，useFetch被用来获取/api/data的数据。data包含从 API 返回的数据，pending
是一个布尔值，表示请求是否正在进行中，error包含任何可能发生的错误。

进阶用法

useFetch也支持更高级的用法，例如自定义请求选项、处理响应和错误等。

  1. 自定义请求选项：可以传递一个对象作为第二个参数，来配置请求，如设置请求方法、头部信息等。
setup() {
  const { data, pending, error } = useFetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' } });

  return {
    data,
    pending,
    error
  };
}
  1. 处理响应和错误：可以添加额外的逻辑来处理响应数据或错误。
setup() {
  const { data, pending, error } = useFetch('/api/data');

  if (error.value) {
    console.error('Error fetching data:', error.value);
  }

  return {
    data,
    pending,
    error
  };
}
  1. 动态 URL：可以传递一个返回 URL 的函数，使得 URL 可以根据组件的状态动态变化。
setup() {
  const url = computed(() => `/api/data?id=${someId.value}`);
  const { data, pending, error } = useFetch(url);

  return {
    data,
    pending,
    error
  };
}

在这个例子中，URL 是根据someId的值动态生成的。

通过这些进阶用法，useFetch可以适应更复杂的数据获取需求，同时保持代码的清晰和简洁。

2.2 useHead

useHead是 Nuxt 3 中的一个核心 Composable，用于管理组件的<head>元数据，如标题、meta
标签、图标等。它简化了在多个组件中管理头部元数据的过程，确保在整个应用中保持一致性和SEO优化。

基本用法
  1. 导入 useHead：在组件中导入useHead。
  2. 使用 useHead：在组件的setup函数中调用useHead，返回一个head对象，你可以在这个对象上添加或修改头部元数据。

示例代码如下：

// components/MyComponent.vue
import { useHead } from '#app';

export default {
  setup() {
    const head = useHead();

    head.title('My Component Title');
    head.meta({ name: 'description', content: 'This is a description for my component' });

    return {
      head
    };
  }
}

在这个例子中，head.title设置了组件的标题，head.meta添加了一个描述元标签。

进阶用法
  1. 动态头部数据：你可以根据组件的状态动态设置头部元数据。
setup() {
  const title = computed(() => `My Component - ${someValue.value}`);
  const head = useHead();

  head.title(title);

  return {
    title,
    head
  };
}
  1. 预渲染优化：useHead可以配合预渲染（SSR）来设置预渲染时的头部元数据，这对于SEO非常重要。
setup() {
  const head = useHead();

  if (process.server) {
    head.title('My Component Title (Server-side)');
  }

  return {
    head
  };
}
  1. 处理默认头部：useHead会自动处理 Nuxt 的默认头部，你可以覆盖它们，但也可以选择保留默认的。
setup() {
  const head = useHead();

  head.meta({ ...head.meta(), name: 'robots', content: 'noindex, nofollow' });

  return {
    head
  };
}

在这个例子中，添加了一个新的元标签，同时保留了默认的元标签。

useHead提供了一种灵活的方式来管理组件的头部元数据，使得整个应用的SEO优化和元数据一致性变得简单。

2.3 useRuntimeConfig

useRuntimeConfig是 Nuxt 3 中的一个核心 Composable，用于在应用的运行时获取配置信息。它使得在不同环境（开发、生产）下使用不同的配置变得简单。

基本用法
  1. 导入 useRuntimeConfig：在组件中导入useRuntimeConfig。
  2. 使用 useRuntimeConfig：在组件的setup函数中调用useRuntimeConfig，返回一个对象，包含了应用的运行时配置。

示例代码如下：

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.public.apiBase);

    return {
      config
    };
  }
}

在这个例子中，config.public.apiBase获取了应用的公共配置信息中的apiBase属性。

进阶用法
  1. 区分环境：你可以根据不同的环境（开发、生产）使用不同的配置。
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    }
  }
});

在这个例子中，根据不同的环境设置了不同的apiBase值。

  1. 私有配置：你可以在runtimeConfig中设置私有配置，这些配置只在服务器端可用。
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    secretKey: 'my-secret-key'
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.secretKey);

    return {
      config
    };
  }
}

在这个例子中，config.secretKey获取了应用的私有配置信息中的secretKey属性。

  1. 使用defineNuxtConfig自定义配置：你可以使用defineNuxtConfig函数自定义配置，并在runtimeConfig中使用它们。
// nuxt.config.ts
export default defineNuxtConfig({
  myCustomConfig: 'my-custom-value',
  runtimeConfig: {
    public: {
      apiBase: process.env.NODE_ENV === 'development' ? 'http://localhost:3000/api' : 'https://myapp.com/api'
    },
    myCustomConfig: {
      type: String,
      default: 'default-value'
    }
  }
});

// components/MyComponent.vue
import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const config = useRuntimeConfig();

    console.log(config.myCustomConfig);

    return {
      config
    };
  }
}

在这个例子中，使用defineNuxtConfig自定义了一个名为myCustomConfig的配置，并在runtimeConfig中使用了它。

useRuntimeConfig提供了一种简单、强大的方式来获取应用的运行时配置，同时支持区分环境和自定义配置。

2.4 useRequestEvent

2.5 useAppConfig

2.6 useAsyncData

2.7 useCookie

2.8 useError

2.9 useHeadSafe

2.10 useHydration

2.11 useLazyAsyncData

2.12 useLazyFetch

2.13 useNuxtApp

2.14 useNuxtData

2.15 useRequestHeaders

2.16 useRequestURL

2.17 useRoute

2.18 useSeoMeta

2.19 useRouter

2.20 useServerSeoMeta

2.21 useState

附录

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：深入探索 Nuxt3 Composables：掌握目录架构与内置API的高效应用 | cmdragon’s Blog

往期文章归档：

  • 掌握 Nuxt 3 中的状态管理：实践指南 | cmdragon’s Blog
  • Nuxt 3 路由系统详解：配置与实践指南 | cmdragon’s Blog
  • Nuxt 3组件开发与管理 | cmdragon’s Blog
  • Nuxt3页面开发实战探索 | cmdragon’s Blog
  • Nuxt.js 深入浅出：目录结构与文件组织详解 | cmdragon’s Blog
  • 安装 Nuxt.js 的步骤和注意事项 | cmdragon’s Blog
  • 探索Web Components | cmdragon’s Blog
  • Vue微前端架构与Qiankun实践理论指南 | cmdragon’s Blog
  • Vue 3深度探索：自定义渲染器与服务端渲染 | cmdragon’s Blog
  • Tailwind CSS 响应式设计实战指南 | cmdragon’s Blog

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1854997.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Leetcode 2713. 矩阵中严格递增的单元格数（DFS DP）

Leetcode 2713. 矩阵中严格递增的单元格数（DFS DP）

Leetcode 2713. 矩阵中严格递增的单元格数 DFS 容易想到&#xff0c;枚举每个点作为起点&#xff0c;向同行同列的可跳跃点dfs&#xff0c;维护全局变量记录可达的最远距离 超时&#xff0c;通过样例193 / 566 class Solution {int res 0;public void dfs(int[][] mat, in…
阅读更多...
网络编程之XDP、TC和IO_URING以及DPDK

网络编程之XDP、TC和IO_URING以及DPDK

一、网络编程常见的技术 在前面已经分析过了XDP、TC和eBPF。也基本把三者间的关系理清了&#xff0c;但现在又有一个疑惑涌了上来。在前面提到过的IO_URING和DPDK与这些技术有什么关系呢&#xff1f;其实只要认真的看过分析文章可能大家心里都已经基本清楚了。 正如在前面不断…
阅读更多...
视频格式怎么转换？9 个免费视频转换工具

视频格式怎么转换？9 个免费视频转换工具

前 9 款免费视频转换器有哪些&#xff1f;在此视频转换器评论中&#xff0c;我们收集了一些有用的提示并列出了顶级免费视频转换器软件&#xff0c;还找出了适合所有级别&#xff08;从初学者到专家&#xff09;的最佳免费视频转换器。 1. Geekersoft免费在线视频转换 最好的免…
阅读更多...
【HTTPS云证书部署】SpingBoot部署证书

【HTTPS云证书部署】SpingBoot部署证书

这里以华为云证书为例。 1. 下载证书 2. 解压 3. 选择.top_Tomcat复制到SpringBoot的Resource/source下 4. 在.properties文件中进行配置 修改key-store和key-store-password
阅读更多...
vue3源码（五）ref、toRef、toRefs、proxyRefs

vue3源码（五）ref、toRef、toRefs、proxyRefs

1.ref 功能 ref与reactive功能类似,都是将数据变为响应式&#xff0c;ref通常用来定义基本类型数据&#xff0c;如字符串、数字、布尔值等。而reactive用来定义对象&#xff08;或数组&#xff09;类型数据。虽然ref也可以用来定义对象或数组类型的数据&#xff0c;但内部会通…
阅读更多...
Rxjava2最全面的解析

Rxjava2最全面的解析

说到区别&#xff0c;可能有的小伙伴会问&#xff0c;我没看过rxjava1。可以直接看rxjava2么。个人觉得不必要&#xff0c;因为 rxjava2.x 是按照 Reactive-Streams specification 规范完全的重写的&#xff0c;完全独立于 rxjava1.x 而存在&#xff0c;它改变了以往 rxjava1的…
阅读更多...
Springboot 项目启动时扫描所有枚举并存入缓存(redis)

Springboot 项目启动时扫描所有枚举并存入缓存(redis)

为什么这么做? 为了springboot 注解属性转换字典方便一点(使用缓存的方式在Springboot 启动时获取字典数据) 在启动时会扫描com.vehicle.manager.core.enumerate包下的所有枚举(包括类中的内部枚举),并取出对应属性以json的方式存入redis 目录结构如下: RedisUtil可以在Red…
阅读更多...
已解决javax.management.BadStringOperationException异常的正确解决方法，亲测有效！！！

已解决javax.management.BadStringOperationException异常的正确解决方法，亲测有效！！！

已解决javax.management.BadStringOperationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查字符串值合法性 确认字符串格式 优化代码逻辑 增加…
阅读更多...
【数据结构与算法】图论 详解

【数据结构与算法】图论 详解

何为完全图、稀疏图、稠密图。 完全图&#xff1a;完全图是一种简单的无向图&#xff0c;其中每对不同的顶点之间都恰好有一条边。对于有n个顶点的完全图&#xff0c;它包含n(n-1)/2条边。在有向图中&#xff0c;如果任意两个顶点之间都存在方向相反的两条边&#xff0c;包含n(…
阅读更多...
汇编快速入门

汇编快速入门

一.基础知识 1.数据类型 DB&#xff08;Define Byte&#xff0c;字节类型 占位8位bit 1字节&#xff09; 范围&#xff1a;DB可以用来定义&#xff08;无符号、有符号&#xff09;整数&#xff08;包含二、十、十六进制&#xff09;和字符 语法&#xff1a;a DB 数据个数…
阅读更多...
C++基础知识——引用

C++基础知识——引用

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …
阅读更多...
热电阻温度计的测量电路

热电阻温度计的测量电路

热电阻温度计的测量电路&#xff0c;为达到高精度测量&#xff0c;通常会采用电桥测量原理&#xff0c;并结合适当的热电阻类型和连接方式。 惠斯通电桥是用于测量一组电阻式元件阻值变化的电路。该电路具有两个并联电阻支路&#xff0c;充当激励电压 VEXCITATION 的分压器。每…
阅读更多...
C++ 教程 - 04 类的使用

C++ 教程 - 04 类的使用

文章目录 类的定义类定义案例构造函数 类的定义 C 在 C 语言的基础上增加面向对象编程&#xff0c;类是用于指定对象的形式&#xff0c;是一种用户自定义的数据类型&#xff0c;封装了数据和函数。类可以被看作是一种模板&#xff0c;可以用来创建具有相同属性和行为的多个对象…
阅读更多...
LLM技术全景图：技术人必备的技术指南，一张图带你掌握从基础设施到AI应用的全面梳理

LLM技术全景图：技术人必备的技术指南，一张图带你掌握从基础设施到AI应用的全面梳理

LLM技术全景图&#xff1a;技术人必备的技术指南&#xff0c;一张图带你掌握从基础设施到AI应用的全面梳理 LLM 技术图谱&#xff08;LLM Tech Map&#xff09;是将 LLM 相关技术进行系统化和图形化的呈现&#xff0c;此图谱主要特点是“专注于技术人视角”&#xff0c;不求从…
阅读更多...
【吊打面试官系列-Mysql面试题】视图有哪些优点？

【吊打面试官系列-Mysql面试题】视图有哪些优点？

大家好&#xff0c;我是锋哥。今天分享关于 【视图有哪些优点&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 视图有哪些优点&#xff1f; 答&#xff1a; (1) 视图能够简化用户的操作&#xff1b; (2) 视图使用户能以多种角度看待同一数据&#xff1b; (3) 视…
阅读更多...
深入学习Java1213新特性

深入学习Java1213新特性

一、关于Java生态圈 二、Java老矣&#xff0c;尚能饭否&#xff1f; 三、JDK各版本主要特性 四、JDK与IDE的下载与安装 五、Java12新特性 1.switch表达式&#xff08;预览&#xff09; 2.Shenandoah GC:低停顿时间的GC&#xff08;预览&#xff09; 3.JVM常量API 4.微基准测试套…
阅读更多...
Vue76-路由对浏览器历史记录的影响

Vue76-路由对浏览器历史记录的影响

一、push模式 默认是push 二、replace模式 替换当前记录&#xff01; &#xff08;当前指针指向的那一条记录&#xff09; 三、小结
阅读更多...
Tobii Pro Lab 1.232是全球领先的眼动追踪研究实验软件

Tobii Pro Lab 1.232是全球领先的眼动追踪研究实验软件

Tobii Pro Lab是全球领先的眼动追踪研究实验软件。软件功能强大且拥有友好的用户界面&#xff0c;使眼动追踪研究变得更加简单、高效。该软件提供了很高的灵活性&#xff0c;可运行高级实验&#xff0c;深入了解注意力和认知过程。 获取软件安装包以及永久授权联系邮箱:289535…
阅读更多...
QT事件处理系统之二：窗口部件的事件拦截，以及事件的传递顺序

QT事件处理系统之二：窗口部件的事件拦截，以及事件的传递顺序

1、案例说明 在父窗口中为selfLineEdit窗口安装事件过滤器，这样我们可以在父窗口中首先拦截来自于selfLineEdit本身产生的事件，并且决定该事件最终是否继续传递到selfLineEdit窗口本身。 2、关键代码 selfLineEdit.cpp #include "selfLineEdit.h" #include &l…
阅读更多...
getPhysicalNumberOfCells获取列数不是合并前实际列数

getPhysicalNumberOfCells获取列数不是合并前实际列数

问题就是:有的导入复杂表头被合并的单元格有默认空字符串&#xff0c;有的直接不存在这个单元格 实际我需要下面这种情况 断点可以看到这个导入第一行合并了&#xff0c;被合并单元格还有默认的空字符串 解决办法就是在合并单元格里面判断&#xff0c;不是第一行第一列都设置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023