nuxtjs asyncData fetch失效不起作用的原因

2020-03-12 22:49:36

调试新nuxtjs工程,水涌asyncData,竟然不起作用,写错误代码也不报错。这可急刹我啦。大晚上七点半就做这,这个时候才解决。你看这篇文章可能需要三分钟,我在这折磨了三小时。

一直以为我框架那里设置出了问题呢。


哎,文档有句话,不可以在子组件中使用,只能是page目录下使用,(多看一眼官方文档你就不会问这个问题了!!!)


真恶心啊,后来想想也是这个事,组件咋给你渲染,展示不展示还是一会事呢。日了狗了。


虽说组件不能够后台渲染了,但是我发现在created中出现的数据,如果不是异步啥的,会玩玩正正的在后端渲染的,不影响哦。

那具体在哪里改用什么,就看自己的需要了。


关于如何在组件中使用异步数据?下面是官网给出的答案。我觉得完全可以用crated解决,

如果组件不是和路由绑定的页面组件,原则上是不可以使用异步数据的。因为 Nuxt.js 仅仅扩展增强了页面组件的 data 方法,使得其可以支持异步数据处理。

对于非页面组件,有两种方式可以实现数据的异步获取:

  1. 在组件的 mounted 方法里面实现异步获取数据的逻辑,之后设置组件的数据,限制是:不支持服务端渲染。

  2. 在页面组件的asyncDatafetch方法中进行API调用,并将数据作为props传递给子组件。服务器渲染工作正常。缺点:asyncData或页面提取可能不太可读,因为它正在加载其他组件的数据。 总之,使用哪种方法取决于你的应用是否需要支持子组件的服务端渲染。


nuxtjs的生命周期,都应该怎么使用,下面附属一篇文章。

nuxtjs踩坑指南


初识不知曲中意,再听已是曲中人。

但是我的vue文件就在page目录下呢,也不行。 哎,原来人家不管你是在page下还是哪,人家的意思是你是要有page属性的,你在page目录下,你改是模版你还是模版。

怪不得非得有一个component文件夹,我本以为我自己在page目录下面建一个子类文件夹,放我的page子组件挺规正的,哎,还是老把式的房子component下面吧把组件。

  • 2019-01-26 10:12:40

    一行代码让webview不加载图片

    最近项目中需要控制列表页和详情页图片资源的显示,列表页比较好做,详情页是用WebView来展示的,不太好控制图片资源的加载。在Google上找到了两个解决办法,跟大家分享一下!

  • 2019-01-29 14:33:07

    child_process中spawn和exec方法的使用

    child_process是nw.exe的一个内置模块,通过它可以实现创建多线程,并可实现主线程和子线程之间的通信。child_process模块中主要使用有两个方法spawn和exec,这两个方法都可以用来创建子线程。除了spawn和exec外,child_process模块还有execFile,fork,spawnSync,execFileSync,execSync,它们都是基于spawn的不同封装。 --------------------- 作者:黄泽平 来源:CSDN 原文:https://blog.csdn.net/zeping891103/article/details/52230175 版权声明:本文为博主原创文章,转载请附上博文链接!

  • 2019-01-29 14:50:51

    Node.js 编写跨平台 spawn 语句

    Node.js 是跨平台的,也就是说它能运行在 Windows、OSX 和 Linux 平台上。很多 Node.js 开发者都是在 OSX 上做开发的,然后再将代码部署到 Linux 服务器上。由于 OSX 和 Linux 都是基于 Unix 的,因此两者共性很多。Windows 也是 Node.js 官方支持的平台,只要你通过正确的方式写代码,就能在各个平台上毫无压力的跑起来。

  • 2019-01-30 17:53:21

    视图与临时表

    视图与表的不同之处:视图是一个虚表,即视图所对应的数据不进行实际存储,数据库只存储视图的定义,对视图的数据进行操作时,系统根据视图的定义去操作与视图相关联的基本表。

  • 2019-02-01 08:43:59

    JS 随机排序算法

    使用JS编写一个方法 让数组中的元素每次刷新随机排列