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下面吧把组件。

  • 2018-10-28 10:50:26

    VectorDrawable简单介绍

    在项目中使用矢量图至少可以缩小我们apk包的尺寸,而且可以在屏幕适配时提供很大的方便,因为矢量图是分辨率无关的。

  • 2018-10-28 11:14:29

    矢量资源工具Vector_Asset_Studio

    Android Studio有一个称为“Vector Asset Studio”的工具, 它可以将SVG文件和PSD文件转化为工程可用的矢量可绘制资源(vector drawable resources),

  • 2018-10-28 11:16:09

    Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下

  • 2018-10-30 00:16:41

    android ToolBar 设置颜色

    app:popupTheme——有时候我们有需求:ActionBar文字是白的,ActionBar Overflow弹出的是白底黑字让ActionBar文字是白的,那么对应的theme肯定是Dark。可是让ActionBar弹出的是白底黑字,那么需要Light主题。这时候popupTheme就派上用场了。android:theme 与app:theme——在AppCompat v21里,提供了一个快速方便的方法设置Toolbar的主题,使用app:theme。而新版本22.1.x中,AppCompat 允许对 Toolbar 使用 android:theme代替 app:theme。最好的一点是:它会自动继承父视图的theme ,并且兼容所有APIv11以上的设备。

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示: