vue3 nuxt3 使用 await useFetch 导致组件无法 defineExpose 出数据

熊猫923

已于 2024-12-18 13:29:49 修改

阅读量148

点赞数 1

文章标签： vue.js

于 2024-12-18 12:01:13 首次发布

本文链接：https://blog.csdn.net/qq_42052204/article/details/144557867

版权

如果你的 defineExpose 写在 await useFetch 请求后面，
会改变组件的生命周期，
导致组件无法 defineExpose 出你要抛出的数据，
所以只需把 await useFetch 写在后面即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

熊猫923

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【三十天精通Vue 3】第三十天 Vue 3中的Nuxt.js框架详解

陈书予

05-09

1万+

简单来说，Nuxt.js是基于Vue.js的一个通用应用框架。它的目的是简化Vue.js应用程序的开发过程，并为开发人员提供更好的体验。借助Nuxt.js，我们可以轻松地搭建一个高质量、高性能的Vue.js应用程序，而不需要手动进行复杂的配置。基于Vue.js：由于Nuxt.js是基于Vue.js构建的，因此我们可以直接使用Vue.js的语法和组件。自动化配置：Nuxt.js提供了一些默认配置，这使得开发者可以省去一些配置环节。

Nuxt+Vue3+TS+Vite入门教程

宋承佑

03-27

6654

SSR,服务端渲染，nuxt3,nuxt,typescript,vue3,vite

参与评论您还未登录，请先登录后发表或查看评论

Nuxt3: useFetch使用过程常见一种报错

q1003675852的博客

03-13

3662

本文主要记录了Nuxt3在使用useFetch时遇到的nuxt instance unavailable或A composable that requires access to the Nuxt instance was called outside of a plugin...报错问题及其产生的原因。

Nuxt3中请求数据-useFetch等

04-10

4023

删：/server/api/user/[id].delete.ts。增：/server/api/user.post.ts。改：/server/api/user.put.ts。查：/server/api/user.ts。前缀的服务器路由，可以把它们放到。里面的文件会自动在路由中加上。

vue3(nuxt3)中使用ref获取不到子组件变量

Yana1225的博客

07-01

690

使用的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例，不会暴露任何在中声明的绑定。可以通过defineExpose编译器宏来显式指定在组件中要暴露出去的属性。

Nuxt3项目中的问题汇总-刷新页面useFetch无返回

qq_38661597的博客

03-09

7443

nuxt3 刷新页面的时候usefetch加了key值后，打印结果data.value是null,获取不到数据。解决1: 加个定时器（不友好）解决2： await nextTick()

vue2(十八)-基础入门之vue-nuxt自定义视图及页面组件的特殊配置

weixin_43520586的博客

11-23

1079

自定义组件，这个布局文件不需要包含标签。可以把这个布局文件当成是显示应用错误（404，500 等）的组件。error.vue 的名称固定不可变。

“Vue3 异步并发火力全开：Promise与async/await，重塑编程新境界！“

最新发布

m0_53992752的博客

11-26

708

Vue3 异步并发火力全开：Promise与async/await，重塑编程新境界！在 Vue 3 中，Promise和是处理异步操作的重要工具。它们允许你在不阻塞主线程的情况下执行耗时任务，并在任务完成后执行相应的逻辑。.async/await的使用自动封装 Promise 状态管理 Promise 的优势链式调用 Promise.all()

Nuxt3数据获取

Alone_Endeavor的博客

01-15

2858

Nuxt3数据获取

Nuxt3使用useFetch调用自身项目中server下的接口

qq_41154522的博客

04-01

1785

Nuxt3使用useFetch调用自身项目中server下的接口。

【Nuxt】Nuxt3 解决 useFetch 首次跳转、刷新无数据的问题

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

11-14

3741

和 uuid （uuid 函数随便写个就行）

解决nuxt3引入图片报错：ReferenceError: require is not defined

jiaohuizhuang6019的博客

12-14

2125

解决nuxt3引入图片报错：ReferenceError: require is not defined

nuxt3中如何进行网络api接口请求

CXW1014的专栏

02-07

6734

useAsyncData 在server端会执行，但在client端会wait，并且上面代码中的data数据和server端请求的一致。这就导致页面首次要展示的内容在server和client端不一致，就会产生Hydration Mismatch 的错误。这样似乎调用机制和useAsynData是一致的，但其实笔者用的时候发现还是有点区别的。所以不得不使用原始的接口地址。这样在本地开发调试的时候，就可以在浏览器上成功访问springboot的接口。也不知道是nuxt3的bug，还是本身就是这样的机制。

nuxt3 的使用

chengtiandi的博客

03-03

3642

nuxt 使用点击观看杨老师的完整教学视频 npx nuxi init nuxt3-app npm i npm run dev // 首次启动项目会生成.nuxt文件夹(生成代码,实际运行) 页面路由先在 app.vue 中提供路由插槽 <template> <div>  <h3>hello nuxt3</h3>

nuxt3 学习笔记

weixin_51109349的博客

02-09

3410

默认的情况下如果用户编写的布局文件的文件名是default.vue，那么它将会被默认应用到全局中，布局通常与< slot/>一同使用，nuxt在加载布局文件后，< slot/>将会默认加载pages目录下的页面。------| Button.vue //页面引入 < BaseFooButton />–| TheHeader.vue //页面引入 < TheHeader/>–| TheFooter.vue //页面引入 < TheFooter/>嵌套路由写法 < nuxt-child />

基于Nuxt3的API接口服务网站

kuizuo12的博客

07-20

4381

体验了一周的Nuxt3，整个的开发过程不敢说特别顺利，因为存在一定的兼容和Bug。目前Nuxt3的目前还处于rc版，实际项目还得考虑上线。不过个人还是非常推荐Nuxt这个框架，在代码编写与开发体验上实在是太香了，不出意外后续的web项目都会采用Nuxt3来构建，期待正式版的发布。......

4.14-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》数据获取

DVTOP的博客

11-25

1399

Nuxt3数据获取的3类方法使用在以下3节中讲解，实现同样功能点的关键代码抽取出分析比较和示例。

一文搞懂Nuxt3基本用法

热门推荐

曲折旅程，艰难人生

01-10

1万+

Nuxt.js实战记录，反复打磨，以臻精品

vue3 nuxt如何请求数据

07-28

在Vue3 Nuxt中，你可以使用Axios模块来进行数据请求。首先，你需要在Nuxt配置文件中的modules数组中添加`'@nuxtjs/axios'`模块。例如： ``` modules: \[ '@nuxtjs/axios', // 其他模块 \], ``` 然后，在你的页面组件中，你可以使用`asyncData`方法或`fetch`方法来请求数据。在这些方法中，你可以使用Axios库来发送HTTP请求并获取数据。例如，你可以在`asyncData`方法中使用Axios来获取数据并将其返回给页面组件进行渲染。例如： ```javascript export default { async asyncData() { const response = await this.$axios.get('/api/data'); return { data: response.data }; } } ``` 在上面的例子中，我们使用`this.$axios.get`方法发送GET请求来获取数据，并将返回的数据赋值给`data`变量，然后将其返回给页面组件进行渲染。你可以根据你的实际需求来调整请求的URL和处理返回的数据。这样，你就可以在Vue3 Nuxt中请求数据了。 #### 引用[.reference_title] - *1* [Nuxt3 ，Vue3的混合渲染框架](https://blog.csdn.net/tian_lai_yuyuh/article/details/120811321)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue项目改造nuxt](https://blog.csdn.net/qq_52912134/article/details/127297871)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]