zoukankan      html  css  js  c++  java
  • NuxtJS项目——异步数据

      Nuxt.js 扩展了 Vue.js,增加了一个叫 asyncData 的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,我们可以利用 asyncData方法来获取数据,Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

      (1)asyncData 的实现方式

      使用 asyncData 方法的方式有下面几种,可以根据自己的喜好来选择:

    • 返回Promise

      返回一个 Promise, nuxt.js会等待该Promise被解析之后才会设置组件的数据,从而渲染组件。

    • 使用async或await
    • 使用回调函数

      (2)asyncData还可以访问动态路由的数据,我们可以使用注入asyncData属性的context对象来访问动态路由数据。

      (3)query参数的监听

      默认情况下,query的改变不会调用asyncData方法。如果要监听这个行为,例如,在构建分页组件时,您可以设置应通过页面组件的watchQuery属性监听参数。

      (4)错误提示

      Nuxt.js 在上下文对象context中提供了一个 error(params) 方法,你可以通过调用该方法来显示错误信息页面。params.statusCode 可用于指定服务端返回的请求状态码。

    如果我们使用了回调函数的方式, 可以将错误的信息对象直接传给该回调函数, Nuxt.js 内部会自动调用 error 方法。

  • 相关阅读:
    [转]关于ORA00979 不是 GROUP BY 表达式错误的解释
    【转】mongodb简介及源码编译安装mongo2.0.0服务器
    mysql 缓存(转)
    iostat命令详解(转)
    C++虚函数,纯虚函数,抽象基类,虚基类(转)
    C++虚类的作用(转)
    C++ 纯虚类(转)
    虚函数的应用特性(转)
    2、Linux多线程,线程的分离与结合(转)
    mongodb js shell不能使用退格键的问题(转)
  • 原文地址:https://www.cnblogs.com/bien94/p/12589090.html
Copyright © 2011-2022 走看看